Jump to content
Search Community

Restart Animation before last ween ends

fagan test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi guys


This is probably painfully obvious to you - but I'm learning!




See the navigation on the left fading from top to bottom ... all I want to do is create a seamless loop. At the moment it's waiting for the tween to end before restarting again - how can I set it so it loops perfect before waiting???


Thanks in advance! 

  • Like 1
Link to comment
Share on other sites

One timeline can't be visible in two different state at the same time, so you can't see the last 0.5sc while you restart it but you can loop the tweenMax in it.

Try something like this :

TweenMax.set($productFloat, {opacity: 0});
TweenMax.set($pointer, {opacity: 0});

// timeline
tl.addLabel ("start")
.add( TweenMax.staggerFromTo($cell, 0.1, {css:{display:'none'}}, {css:{display:'block'}}, 0.1) )
.add( TweenMax.staggerFromTo($beerList, 0, {css:{fontSize :"0.8em"}}, {css:{fontSize :"0.9em"}, repeat:-1, repeatDelay:1.25}, 0.1), 0)
.add( TweenMax.staggerFromTo($beerList, 0, {css:{fontSize :"1em"}}, {css:{fontSize :"0.8em"}, repeat:-1, repeatDelay:1.25}, 0.1), 0.1)
.add( TweenMax.staggerFromTo($pointer, 0, {opacity:0}, {opacity:1}, 0.1), 0)
.add( TweenMax.staggerFromTo($pointer, 0.5, {opacity:1}, {opacity:0, repeat:-1, repeatDelay:1.25}, 0.1), 0.1); 

I'm not sure about the repeatDelay, but 1.25 seems to work with my tests.

  • Like 2
Link to comment
Share on other sites

The best thing to do in a case like this is produce a reduced test case on CodePen http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/


AbsolutGob is absolutely correct. Due to the linear nature of timelines the playhead can not be at the beginning while other animations at the end are playing.

I also agree that he is on the right path in recommending that each animation run independently with its own repeat delay so that it repeats before later animations begin. 

Again with a simple CodePen with a single list it should be fairly easy to replicate what you need to do. As you update your live site we really don't know what version you are currently working with or what the expected behavior is supposed to be.

  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...