Trying to emulate CSS Keyframes

[teamjordy]

Hey All,

 

I'm trying to replicate the pace of the animations as seen in this CSS animation example:

 

 

...but I can't seem to capture the 'offset' snapping back on the tail end of the animation. I'm afraid I haven't grasped the tweening concepts completely, and can't figure out how to translate an element in multiple steps (the CSS equivalent would be 0%...70%...100%). The best I could come up with is this attempt here using yoyo:

 

See the Pen ZbBGyR by anon (@anon) on CodePen

 

...but that is just an animation playing forward and then reversed.

 

I realize I'm going for pretty fine-grained detail here, but I'm hoping that GSAP being the powerful giant it is can get me there. Any suggestions?

See the Pen WQGmvK by anon (@anon) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

It looks like you have the basic GSAP syntax down. Good job!

 

I found it really hard to see the subtle details of your animation as I had to refresh the entire CodePen page to play it and all happened very fast.

I think to get the effect you want is really just a matter of choosing the right ease and timing.

 

Check out the Ease Visualizer here: http://greensock.com/ease-visualizer