My first Tween

[SC_74]

Hello All!

 

Posting my first post here. :-)

 

 

3 simple questions :

 

- How to keep visible top_overlay and bottom_overlay during the « loader » animation?

 

- How to do this tween in reverse mode?

 

- Is there a easier way to write or make this kind of script/transition?

 

 

Thanks so much for any help! :-)

See the Pen aKKLqP by SC-74 (@SC-74) on CodePen

[determin1st]

try creating a timeline for sequencing. onComplete is for different things.

[SC_74]

Like that?

 

    var tl = new TimelineMax();
    tl.add( TweenLite.to(middle_overlay, 2, {delay: 1, display: 'block', width: 0, repeat: 2, yoyo: true}));
    tl.add( TweenLite.to([top_overlay, bottom_overlay], 1, {autoAlpha: 1, height: 0, ease: Power4.easeInOut}));
    tl.add( TweenLite.to([h1, p], 1, {autoAlpha: 1, x: '0%', ease: Power3.easeInOut}));



$('.button1').click(function(event) {
        tl.from([top_overlay, bottom_overlay], 1, {autoAlpha: 1, height: 0, ease: Power4.easeInOut});
        tl.play();
    });

 

Doesn't work!

[determin1st]

1 hour ago, SC_74 said:

Doesn't work!

 

Prove it!

 

if you .play() timeline later, create it {paused:true}. also, i dont get why you use .from() call. also, you can add single tween to timeline using .to() method. also, dont hope that GSAP will handle state management for you, better, control it separately. also, everything you do with jquery there, can be done with plain JS..

 

[SC_74]

Okay thank you!