pagepiling.js with GSAP

[megam]

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 ?

[megam]

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

[ZachSaucier]

Hey megam and welcome to the GreenSock forums. I'm glad you got your problem figured out.

 

I think that you would learn a lot from my article about animating efficiently. Also the most common GSAP mistakes.

 

Next time you need debugging help please make a minimal demo of the issue.