Reanimating on click

[Johny13]

Hi guys, i'm new to GSAP and i'm loving it, it's great. I want to animate rocket to ScrollTop on click and i've managed to do that but if i have more clicks it wont show (trail and smoke), only animates rocket and scroll. I tried with clearProps but no luck. Any ideas? This is my click code.

    TweenMax.set('.trail-wrapper', {alpha:0})
    TweenMax.set('.cloud', {alpha:0})
    var tl = new TimelineMax();
    $('.toTop').on('click', function () {
           tl.to('.trail-wrapper',1 , { alpha:1 })
             .to('.cloud', 1, { alpha: 1 })
             .to('.rocket-wrapper', 3, { y: -400, ease: Expo.easeIn })
             .to('.cloud', 3, { attr: { cy: 185 }, ease: Expo.easeIn }, "-=3")
             .set('.cloud', { clearProps: "all" })
             .set('.rocket-wrapper', { y: 450 })
             .to('html' , 1, { scrollTop:0 })
             .to('.rocket-wrapper', 4, { y: 0, ease: Elastic.easeOut.config(0.5, 0.4) })
             .to('.trail-wrapper', 2.5, { scaleX: 0.5, scaleY: 0, alpha: 0, ease: Expo.easeOut }, "-=2.0")
    });

 

See the Pen BLVOOj?editors=1010 by petebarr (@petebarr) on CodePen

[Dipscom]

Hi @Johny13!

 

Welcome to the forums!

 

To me it looks like your issue is simply how you are setting up your code. Rather than create the timeline tweens on click, just use the timeline's methods to play/pause it on click.

 

TweenMax.set('.trail-wrapper', {alpha:0})
TweenMax.set('.cloud', {alpha:0})
var tl = new TimelineMax({paused:true});

tl.to('.trail-wrapper',1 , { alpha:1 })
.to('.cloud', 1, { alpha: 1 })
.to('.rocket-wrapper', 3, { y: -400, ease: Expo.easeIn })
.to('.cloud', 3, { attr: { cy: 185 }, ease: Expo.easeIn }, "-=3")
.set('.cloud', { clearProps: "all" })
.set('.rocket-wrapper', { y: 450 })
.to('html', 1, { scrollTop:0 })
.to('.rocket-wrapper', 4, { y: 0, ease: Elastic.easeOut.config(0.5, 0.4) })
.to('.trail-wrapper', 2.5, { scaleX: 0.5, scaleY: 0, alpha: 0, ease: Expo.easeOut }, "-=2.0")

 $('.toTop').on('click', function () {
    tl.play(0)       
 });

 

Have a look at the docs to have an idea of all the possibilities: https://greensock.com/docs/TimelineLite

[Johny13]

thanks dude, that's it  will do that, and thank's for this fast answer.