[Butterfly Effect]

yea that's what i want to achieve , thank you akapowl 

[Butterfly Effect]

How can i make this book effect like butterfly , like its left side and right side fly like a wing ? is it possible with gsap ?

See the Pen MWjYjoq by midn07 (@midn07) on CodePen

[TweenLight vs TweenMax vs Timeline ?]

Thank you Carl for answer i'll watch your tutorial to get started with GSAP

[TweenLight vs TweenMax vs Timeline ?]

I have to say that greensock have become a great library to use in animations and i thank you for that ♥

 

but i have a question what is the difference between using TweenLight & TweenMax and Timeline ?

 

what is the benefits from Each one of them and what i can use in each Tween ?

 

i have read some of the documentary but i cannot understand each difference between each other .

[pagepiling.js with GSAP]

i fixed the problem with this code

 

  onLeave: function (index, nextIndex, direction) {

        if(nextIndex == 3){

          gsapAniSa.seek();

          gsapAniSa.pause();

        }

        if(nextIndex == 4){

          gsapAniPro.seek();

          gsapAniPro.pause();

        }

        if(nextIndex == 5){

          gsapAniSup.seek();

          gsapAniSup.pause();

        }

        }}

 

first we put seek and pause for each timeline with different name with global variables out side of pagepiling then when we call animation like gsap.to(......)
we call gsap.play() before .to etc.

then it works

[pagepiling.js with GSAP]

what i want to do is when i scroll to the index the GSAP animation start and i achieved that by afterLoad function , but the problem if i scroll back to the same section the animation restart and play in the same time and it freeze in the middle , what i want to do when i scroll to the section the animation clear the timeline and restart again the animation , tried to make this but it doesn't work :

    var gsaps = gsap.timeline();
    gsaps.restart();

here is my pagepiling code :

    $('#pagepiling').pagepiling({
        verticalCentered: false,
        css3: false,
        sectionsColor: ['white', '#E8E8E8', '#f2f2f2', '#EC008C'],
        onLeave: function (index, nextIndex, direction) {
    
            //reaching our last section? The one with our normal site?
            if (nextIndex == 1) {
    
                //fading out navigation bullets
                $('#pp-nav').fadeOut();
    
                $('#section1').find('.content').animate({
                    top: '0%'
                }, 700, 'easeInQuart');
            }
    
            //leaving our last section? The one with our normal site?
            if (index == 1) {
    
                //fadding in navigation bullets
                $('#pp-nav').fadeIn();
    
                $('#section1 .content').animate({
                    top: '100%'
                }, 700, 'easeInQuart');
            }
        },
        afterLoad: function(anchorLink, index) {
          if(index == 2){
            var gsapAni = gsap.timeline({duration : 0, ease: Linear.easeIn});
           gsapAni
           .fromTo("#GLCalc" , {opacity:0},{ opacity:1 })
           .from(".aroundCalc" , { transformOrigin: "center" , rotation : 360 , opacity : 0})
                }
          if(index == 3){
            var gsapAni = gsap.timeline({duration : -1, ease: Linear.easeIn});
    
           gsapAni
           .fromTo("#sales" , {opacity:0} ,{ opacity:1 })
           .from(".salesMob" , {transformOrigin : "top" , scaleY:0})
           .from(".salesMobUpper" , {opacity : 0})
           .from(".salesMobBottom" , {opacity : 0} , "-=0.5")
           .from(".salesMobLight" , {opacity : 0})
           .from(".salesMobLightInner" , {opacity : 0})
           .from(".salesCompBack" , 1 , { transformOrigin : "bottom right" , scaleX : 0.2 , opacity : 0})
           .from(".salesCompLight" , { opacity : 0})
           .from(".salesCompLightOut" , { opacity : 0})
           .from(".salesCompProd" , { opacity : 0})
           .from(".salesInnerLight" , {opacity : 0})
           .from(".salesBuyBtnBack" , {transformOrigin : "top" , scaleX:0})
           .from(".salesBuyBtnLight" , {opacity :0})
           .from(".salesBuyBtnLightOut" , {opacity :0})
           .from(".salesBuy" , {opacity :0})
           .from(".salesLine" , {opacity : 0})
           .from(".salesBag" , {opacity :0})
          }
          if(index == 4){
            var gsapAni = gsap.timeline({duration : 0.5, ease: Linear.easeIn});
           gsapAni
           .to("#proc" , {  opacity:1 })
           .from("#proc_bg" , {transformOrigin:"center" , scale:0})
           .from("#proc_bg2" , {opacity:0})
           .from("#receipt_bottom" , {opacity:0})
           .from("#receipt" , {transformOrigin:"bottom left" , scale:0})
           .from("#receipt_shadowInner" , {opacity:0})
           .from("#receipt_shadow" , { opacity :0})
           .from(".receipt_inner" , {transformOrigin:"left" , scaleX : 0})
           .from("#coin_upper" , 1 , {x:-50 , opacity :0})
           .from("#coin_beside" , 1 , {x:-50 , opacity :0})
           .from(".coin_besideCircle" , {opacity :0} , "-=0.5")
           .from("#coin_behind" , 1 , {x:-50 , opacity :0})
    
          }
            if(index > 1){
            var gsapAni = gsap.timeline({duration : -0.5 , ease : Linear.easeIn});
            gsapAni.
            fromTo(".first-wrap-pages-custom_content", 2 ,{opacity:0,y:40},{opacity:1 , y:0})
          }
          //using anchorLink
                if(anchorLink == 'secondPage'){
                    alert("Section 2 ended loading");
                }
        },
    });

what can i do in this situation to restart my animation again ?