Staggered animation with pause inbetween

[sygad1]

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

[PointC]

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.

[sygad1]

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

[PointC]

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? 

[sygad1]

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

 

The 3 states all visible at once would look like this

 

 

[PointC]

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?

[sygad1]

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

[Carl]

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.

 

[PointC]

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.