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:
Trying to emulate CSS Keyframes
in GSAP
Posted
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