Jump to content


Staggered animation with pause inbetween

Recommended Posts

Hi All


Having a bit of a problem with staggered animations.


I want to stagger a list so that it fades in and moves up, pauses for 1s, then fades out and moves up even more, effectively:


Fades in from y:100
Pauses for 1s
Fades out to y:-100



I tried with a staggerFromTo but it just whizzes past and everything is performed in 1 go, putting a delay only delayed the start of the animation, not put a pause in the middle.


I tried with a timeline, which works, but only for 1 item, when multiple items are used, they stack on top of each other in a mess.


Any help appreciated

See the Pen eRqqJq by sygad1 (@sygad1) on CodePen

Link to comment
Share on other sites

If I understand your desired outcome correctly, it's just a matter of starting the fade-out stagger later via the position parameter. Is this what you needed?


See the Pen wqGzyB by PointC (@PointC) on CodePen

Hopefully that helps.


Happy tweening.


  • Like 3
Link to comment
Share on other sites

very very close


is there anyway of having 3 on screen at once, the fading out, the visible and the fading in, essentially all 3 states


no big if not possible, this is close enough to what I need

Link to comment
Share on other sites

I'm not quite sure I understand having all 3 states at once. If the <li> in the red box pauses for a second, the <li> above and below the box should be transparent during that pause, correct? If that's the case, you would only see two at once: the one moving out of the red box and the one moving into it. That being said, you could use a loop instead of a stagger and play with the delays and durations and do something like this:


See the Pen PKNGLw by PointC (@PointC) on CodePen

Does that help? 


  • Like 4
Link to comment
Share on other sites

That's a pretty cool effect, i'll have a play with that.


The 3 states all visible at once would look like this



anim states.png

Link to comment
Share on other sites

So the fades are happening while the red box item is pausing for a second? Like this?

See the Pen JyXEaE by PointC (@PointC) on CodePen

Does that help?


Link to comment
Share on other sites

Thanks, but that's moved away from the result i'm after


This is fading in at a stationary point then moving up, pausing, moving up and again at a stationary point, fading out


It might be easier to imagine the entire list wrapped around a cylinder and the cylinder is rotating


The 1st item starts at the bottom and moves AND fades into the red box, pauses for 1s, then moves AND fades out at the top


As each item reaches the red box, the next on the list appears and the cycle starts over


By the time the 3rd item has started its animation at the bottom, the 2nd item is in the red box and the 1st item is just about to fade out at the top.


The only stationary point is when an item is in the red box


Hope that helps and again, cheers for the help

Link to comment
Share on other sites

hmm, I've been following this thread and had the same understanding as Craig. It seems each element takes a much more elaborate path from bottom to top. Is the following accurate?

  1. start completely transparent.
  2. moves up a tiny bit and fades in to 0.1 opacity at bottom
  3. pause
  4. move to redbox and gain full opacity ( at this point the next item moves to step 2 )
  5. pause
  6. move up and fade out to 0.1 opacity ( at this point the next item moves into the red box)
  7. pause
  8. move up some more and fade out completely ( at this point next item moves out of red box)

Perhaps it would help to get the animation of 1 item (with all its pausing) and then we can help get the other elements in synch.


  • Like 2
Link to comment
Share on other sites

I'm still confused as to what the items should be doing right before and right after the red box. You said there was only one stationary point, but wouldn't the 'pre-redBox' and 'post-redBox' items be stationary too? Here's another possibility where they fade in slightly before moving into the red box and slightly fade out after moving out of the red box. 

See the Pen vJGeqX by PointC (@PointC) on CodePen

Or... did you mean all items would be moving together and they fade in/out as the approach and move away from the red box. Like this:


See the Pen gxrXve by PointC (@PointC) on CodePen

In both of these new forks I've made the duration a variable so you can play with the speed a bit. The y movement is hard coded on both, but you could easily make that a variable as well.


Hopefully these are closer to what you wanted. Happy tweening.


  • Like 4
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.