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 ?