Advanced stagger with keyframes

[Gobinda Das]

I want to create the wave effect shown on the right side. I made several divs in a single line and moved them back and forth from top to bottom. I tried using gsap.fromTo(), which starts from the top and goes to the bottom, creating a perfect wave. However, the issue is that it starts from the top, but I want it to start from the center and animate outward.

 

You can see the demo here: Codepen Demo

 

To fix this issue, I used keyframes, but the stagger is not applying correctly. If we put `repeat` inside the stagger object, each div's movement should be individual and not wait for the entire animation to complete. However, it seems like it's waiting for the whole animation to finish before continuing.

See the Pen eYaKEOj by gobinda-das-dev (@gobinda-das-dev) on CodePen.

[Cassie]

Hiya!

 

No it's doing the correct thing, what you're seeing is the result of easing. There are many more easing options within keyframes, you can ease the entire tween, the keyframe block or each step in the keyframes.

BUT you can't replicate the easing on the fromTo because you've got more steps in the animation. 0 is now a step in the keyframes rather than a midpoint in the animation, so if you add 'easeEach' the beginning/end of the ease will be at 0 rather than 0 being the midway point in the ease.

 

Here's the same animation with no easing, you can see they're the same.

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

 

If you want the animation to start at a different point you can use control methods? That's probably the easiest way

 

edit - ah? Unless you wanted it to start with a solid line in the center? Is that what you're after?

[akapowl]

Yep, I was also going to say that it looks like it does exactly what it's supposed to do.

In this example on the left is that very same animation with just SCSS (well except for the overall ease on the tween, which I commented out for this purpose).

They behave exactly the same.

See the Pen RwmJJaj by akapowl (@akapowl) on CodePen.

 

If you want the line to start out in the middle you might just have to use multiple tweens for that alongside some relatively simple 'calculations' for the durations in relation to each other.  I added the tweens to a timeline in the example below, so you can still toggle it via your buttons there.

Here's my thinking process on this:

Considering an ease of 'none' (which helps in situations like that when you want to achieve movements that need to be synchronized in one way or the other) that would be:
 

1.  Tween to one direction from the center.
2.  Then tween to the other direction. This can be repeated infinitely with a yoyo set to true and thus, since the distance it has to travel is twice the distance of the first tween, this tween should be twice as long as the first tween. and you want to delay this tween by the duration of that first tween - either via a delay or via the position parameter of a timeline.

Now comes the part considering eases - let's take power1.inOut as you had it as the ease for the 'full wave':
 

• Since the first tween resembles only the out part of that wave (here; when it comes back to the top again) it should technically only have the out part of that ease applied, so here power1.out
• But that would result in a 'jagged edge' when the dots start moving up from the center, as the tween it is not easing in - you can see that with the commented out version of the timeline in my example.
• So actually we do want an inOut ease - with the duration unchanged, it would result in a 'malformed wave' at the beginning though. So I changed the ease of the first tween to 'power1.inOut' too, increased its duration (1.5 times what it was before seems to look fine; so 0.75 now) and the delay of the second tween accordingly, and it looks smooth again.

Maybe somebody else has a more clever approach that I didn't think of, but I hope that can help in some way.

See the Pen mdYKKQz by akapowl (@akapowl) on CodePen.