Jump to content
GreenSock

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

Stagger a more complex Animation

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,

 

I was wondering if it was possible to create an animation and 'stagger' it over a list of element.

I explain myself, when using stagger you can only use the 'y' (or other css property) property only once  like this :

 

var tlGo = new TimelineMax({paused: true, repeat: -1});
tlGo.staggerTo(".line", 1, {x:50}, 0.005);

// In this case each line would go x:50 one after the other
// But what if I want to do x:50 then x:0 one after the other???

 

What if I want to stagger a more complex animation : 

 

var tlGo = new TimelineMax({paused: true, repeat: -1});
tlGo.staggerTo(".line", 1, {x:50}, {x:400}, {y: 200}, {x: 100}, {y: 50}, 0.005);

//This obviously won't work, it's a way to explain my point.

 

What I would like to do is something like that (creating a complete animation) : 


 

tlGo.to(".line", 1, {x:50}, 0.005)

        .to(".line", 1, {x:300, y: 20}, 0.005)

        .to(".line", 1, {x:20, y: 200}, 0.005);

 

and then stagger this to each element.

 

I'm thinking about using a simple loop, but I would prefer do it the GSAP way if a GSAP way is available.

 

Hope you understand my question. Thank you

 

 

In the Codepen example I'm doing like this :

 

var tlGo = new TimelineMax({paused: true, repeat: -1});
tlGo.staggerTo(".line", 1, {x:50}, 0.005)
        .staggerTo(".line", 1, {x:0, ease:easing}, 0.005, '-=.99');

 

But it's not exactly what I want to do. The timing is really hard to manage that way.

 

See the Pen PEJZbY?editors=0010 by romaingranai (@romaingranai) on CodePen

Edited by romain.gr
Link to comment
Share on other sites

Yeah, synchronizing multiple staggers like that can be difficult.

If I need each element to do multiple steps I find it a bit easier to create a timeline for each element and then put each element's timeline into a main timeline like:

 

 

See the Pen PExdXY?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You still may have to finesse the durations and offsets to get exactly what you want but I find it easier to work with.

  • Like 1
Link to comment
Share on other sites

Hi, thanks, I'm going to play around that solution. I have another issue, I think it's related (because of the timing), the problem is that the whole animation needs to be finished to start again. I'd like that each line move to left then right continuously, like a moving flag actually. 

 

We can just focus on the first line, it goes to right then come back to left, what I'd like to achieve is that the line as soon as it came to the original point start straight away to re-animate (right then left) and so on, yes, like a moving flag. 

 

Thank you btw ;)

Link to comment
Share on other sites

Hey Carl,

 

it's exactly that, good job. I'd like to understand why switching from TimelineLite to TimelineMax does the trick?

Another question, are those Pens always available (so then I can check those when I need it), or it's better if I copy them into my own Codepen?

 

Thank you ;)

  • Like 1
Link to comment
Share on other sites

I used TimelineMax so that each line's animation could repeat on its own (not wait for all animations to finish).

Pens should be around for many years.

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