Scroll magic javascript

 Scroll magic code

Script tags used in html are:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js" integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js" integrity="sha512-RvUydNGlqYJapy0t4AH8hDv/It+zKsv4wOQGb+iOnEfa6NnF2fzjXgRy+FDjSpMfC3sjokNUzsfYZaZ8QAwIxg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js" integrity="sha512-5/OHwmQzDSBS0Ous4/hlYoWLHd06/d2r7LdKZQVBXOA6PvOqWVXtdboiLTU7lQTGyVoKVTNkwi0ol4gHGlw5ww==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js" integrity="sha512-/8phkpsAzxsbuX18zNkQ2gCq4Q5JsWoPo1jHLDeZorPUHRtx9YJxpdk+os05oDhPJVCNzA2/NMl4rmJyQ+6Fvg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js" integrity="sha512-I0VFyPo7hdM7YrEbQ0pvX4bX2904k0+B19u/xBrPrQoMprfcSnIDfGFD8kP52GbAhwtDjkEVhXlQvj8+vkJyew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js" integrity="sha512-ht40uOoiTef4nKq0THVzjIGh3VS108J577LVVgNXnQLXza3doXjoM3owin2vd+Hm6w88k12RIrePIVY2WNzz6Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/BezierPlugin.min.js" integrity="sha512-oOy5+mtZRcqjn6b9k4oj+tk2/hVIetzOAM9Y5cndEHgLxiIGavAz1agbHf6JjGzxXZ2SMbu08Uy1DDF0UwA0qQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>



Codes


const flightpath = {
    curviness : 1,    0 means animation will super straight no curves during turnings, 1 means it will get curve during turnings 2 will make circular animation 

    autoRotate : true, this will rotate our object according to its nature 
    values : [
        {x:100, y: -20}, 
        {x:500, y:100}, 
        {x:1000,y:-100}, 
        {x:1600, y:-200}
    ]  hese are the points which we want to animate x refers to horizontal, y = vertical, same as position of absolute like top and left, 100px from left and 20px from top



}

const tween = new TimelineLite();  this is timelinelite plugin and we are going to add animation to this timeline
tween.add(     // adding animation
    TweenLite.to(".paper-plane",1,{      tweenlite.to refers : koslai animation gaarne, it take takes parameter (object which to be animated, duration of animation, define property that we going to animate)
        bezier: flightpath,  flightpath is property we have created at top, and bazier is plugin that helps to insert our flighpath property inside tweenlite
        ease:Power1.easeInOut  same like ease in out linear in css
    })
)


// animation on scrolling


const controller = new ScrollMagic.Controller();

const scene = new ScrollMagic.Scene({
    triggerElement : '.animation',  parent div
    duration: 3000,      3 second
    triggerHook:0    this indicate when animation should be started according to parent div position 0 means section le top screen ma click garesi matra animation suru gaarne, 1 vaneko scroll garda already aniation start hunne. You can even keep to 1.3 0.2 like that too
})

.setTween(tween)    we created timeline called tween as in top with const tween
.addIndicators()
.addTo(controller)
.setPin(".animation")    this makes that section or div large enogh untill aniation isnt completed


HTML CODES


    <section class="section1">
        <h1>Welcome to my<br>animation</h1>
    </section>

    <section class="animation">
        <img class="paper-plane" src="./images/paper.png" alt="">
    </section>

    <footer>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae aliquid, tempore repellat ducimus itaque accusantium beatae. Architecto asperiores error ipsum rem in voluptatem nisi velit, a optio, obcaecati vitae possimus, illum beatae tempore sunt! Impedit quis veritatis illo unde voluptatibus iure fugiat doloremque optio, ea, reprehenderit, labore velit? Officiis ab architecto soluta est dolores! Non odio praesentium cupiditate, deleniti neque quasi mollitia, magni exercitationem soluta repudiandae sunt. Id distinctio, doloribus, inventore consequatur dolorum omnis quaerat voluptates impedit quis a labore repudiandae debitis. Placeat eum soluta nam illo nisi laborum quas odit? Animi quo ad tempora, veniam cum dignissimos voluptatibus consequatur?</p>

    </footer>



Rewriting code without information


const flightpath = {
    curviness : 1,
    autoRotate : true,
    values : [
        {x:100, y: -20}, 
        {x:500, y:100}, 
        {x:1000,y:-100}, 
        {x:1600, y:-200}
    ] 



}

const tween = new TimelineLite();
tween.add(
    TweenLite.to(".paper-plane",1,{
        bezier: flightpath,
        ease:Power1.easeInOut
    })
)


// animation on scrolling

const controller = new ScrollMagic.Controller();

const scene = new ScrollMagic.Scene({
    triggerElement : '.animation',
    duration: 3000,  
    triggerHook:0
})

.setTween(tween)
.addIndicators()
.addTo(controller)
.setPin(".animation")






Comments

Post a Comment

Popular posts from this blog

Gsap effect on click

 Gsap effect on click   < div class = "item" >     < div class = "circle" ></ div >     < h1 class = "head" >Angela</ h1 >   </ div > Here is the same code, small gsap effect on click; * {     margin: 0 ;     padding: 0 ;     box-sizing: border-box ; } body {     display: flex ;     justify-content: center ;     align-items: center ;     height: 100 vh ;     background-color: rgb ( 10 , 8 , 19 );     color: white ;     font-family: sans-serif ; } .item {     display: flex ;     gap: 1 rem ;     align-items: center ;     cursor: pointer ; } .circle {     height: 20 px ;     width: 20 px ;     background-color: white ;     border-radius: 50 % ; } Javascript; gsap . defaults ({ duration : 0.2 }) const myAnime = gsap . timeline ({ paused...
Read more

Gsap timeline position parameters

 Gsap timeline position parameters In the following timeline code:  let mytimeline = gsap . timeline () mytimeline     . to ( '.box1' ,{ x : 400 , duration : 1 })     . to ( '.box2' ,{ x : 400 , duration : 1 })     . to ( '.box3' ,{ x : 400 , duration : 1 }) normally when animation of box1 completed in 1s then box2 starts and after 1second of box2 animation of box3 starts if the duration of box1 was 5 second then animation of box1 will take 5s to complete and then only animation of box2 starts. For more enhancement the position parameter was introduced Some of the examples of position parameter are: 1. let mytimeline = gsap . timeline () mytimeline     . to ( '.box1' ,{ x : 400 , duration : 1 })     . to ( '.box2' ,{ x : 400 , duration : 1 })     . to ( '.box3' ,{ x : 400 , duration : 1 }, 1 ) On that box 3 there is "1" outside the {} which means that   start exactly at a time of 1 It do...
Read more

Special Property: Stagger

Special Property: Stagger The stagger property allows you to offset the start time of multiple targets in a single tween.  In GSAP3 you no longer need the staggerTo(), staggerFrom(), and staggerFromTo() methods of GSAP2. gsap . to ( '.box1' , {     y : - 400 ,     stagger : 0.1 }) there will be 0.1 timing difference between 1st and 2nd box, and 0.1 timing difference between 2nd and 3rd, I mean  each box will start 0.1 seconds after the previous one starts. lesser the value of stagger lesser will be duration and timing get overlapped, the greater the value greater the timing difference between elements A stagger object gives you greater control over where the staggers start from and how the timing is dispersed. gsap . to ( '.box1' , {     y : - 400 ,     stagger :{         each : 0.2 ,         from : 'end'     } }) each:0.2  means there will be 0.2 seconds  be...
Read more