Jump to content

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

set maximum time for timeline that have infinite repeat tweens

Go to solution Solved by Carl,

Recommended Posts

I want to have 2 scenes (=timelines)  in my animation. scene1 have some twinkle stars which i want to animate with repeat -1 (infinite). However, i want to set a max time for the scene1 to 5 seconds, so i can move after that to the next timeline/scene. I also want to be able to get the total duration of the animation correctly, based on the max duration of the animation. 


I know that I can set the second timeline position to start 5 seconds after the first timeline, but i want to be able to get the correct total duration of my animation, so if the first timeline is maxed to 5 seconds, and the second timeline is 5 seconds, i want to be able to get 10 seconds for my animation. 


is this possible?

See the Pen YzNrZaY by mrharel (@mrharel) on CodePen

Link to post
Share on other sites

Hi and welcome to the GreenSock forums.


So glad you provided a demo with most of it working. Saved me loads of time!


The trick here is that we are not going to add the stars scene1() animation to the main timeline.

We are going to add a tween that does a tweenTo() on the stars animation for 5 seconds (or any time you want).


Note that scene1() now just returns a timeline.

I added GSDevTools so that you can see that the main timeline has a finite duration


See the Pen JjErJvP?editors=0010 by snorkltv (@snorkltv) on CodePen


This video explains tweenTo() in detail


Great job on the demo!

  • Like 6
Link to post
Share on other sites

Hi and welcome to the GreenSock forums.


As far as I know, once you add an infinite instance inside a timeline that timeline's duration becomes infinite as well. As much as @GreenSock has spent many hours bending the construct of time-space (for example you can pass a negative time to a GSAP instance), I'm afraid He hasn't gone that far, yet. We have a new admin in the house that might be able to crack that :D


In a serious note now, what you can do is add a label in a certain position and get that label's time, like that you'll have a notion of the duration of the timeline until that point:



Another alternative is to combine the label time plus the duration of the infinite timeline, it has to be duration and not total duration:



I also saw that @Carl beat me to the punch here, so you can do what He said too :D:D:D


Happy Tweening!!! 

  • Like 2
  • Haha 4
Link to post
Share on other sites

wow. first of all I have to say, the community here is awesome!

Thank you you both for the information - i think the tweenTo is exactly what I was looking for. 


thank you so much. 

  • Like 1
Link to post
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.