Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
lunelson@gmail.com

Staggering Timelines within Timelines

Go to solution Solved by Carl,

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

This is a beginner question—I'm just getting in to this—I notice that stagger methods seem to be for staggered application of a tween, as opposed to being able to stagger a timeline.

 

This pen is the only way I could think of, to stagger the application of a timeline animation. In this case, it's applied to 100 red boxes, but I'm not sure if it's the best way of doing it, in terms of memory etc. since it results in the creation of 100 TimelineLite instances... is there a more performant or concise way of doing it?

See the Pen ByZLoP by lunelson (@lunelson) on CodePen

Link to comment
Share on other sites

  • Solution

Hi and welcome to the GreenSock forums.

 

Thanks for the demo. Its very helpful. 

Great to see you are already using some great techniques!

 

If you are super concerned about the memory-footprint of a TimelineLite, you could certainly flatten it and have only 1 timeline like so:

 

$boxes = $('.box');
 
var boxesTL = new TimelineLite();
$boxes.each(function(index){
  var insertionTime = 0.1 * index;
  boxesTL.from(this, 0.25, {autoAlpha: 0}, insertionTime)
         .from(this, 0.25, {rotation: '-=180deg'},  insertionTime + 0.125);
});

http://codepen.io/GreenSock/pen/ByZWNP

 

Frankly, in all my use-cases I have never see any detrimental side-effects of having too many timelines. 

I really wouldn't even consider it until you are dealing with thousands of them. 

I haven't created any formal stress tests either, just speaking anecdotally from experience.

  • Like 2
Link to comment
Share on other sites

Thanks Carl,

 

that's a more efficient solution, I didn't think of just using the position value to offset them. I'll keep playing around with it!

  • Like 1
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.
×