Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
fagan

Restart Animation before last ween ends

Recommended Posts

Hi guys

 

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

 

https://beer-interactive-ani.webflow.io/bundle1-play

 

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 :

//innit
TweenMax.set($productFloat, {opacity: 0});
TweenMax.set($pointer, {opacity: 0});
$beerNav.hide();

// 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 problem now with this method, is that when I click on the bottle to stop it and trigger the animation - the pointer is on the wrong bottle because it starts at a different time. 

Link to comment
Share on other sites

Try with 1.1 as repeatDelay. 16 (elements) * 0.1sc (stagger) - 0.5sc (length of the tween, the repeatDelay begin at the end of the tween)

Link to comment
Share on other sites

Sorry with that new method.. Now it ends the timeline, and just sits looping the pointer and the bottles no longer change

 

I have updated the link so you can see

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.
×