Jump to content
Search Community

Trying to emulate CSS Keyframes

teamjordy test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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

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.
  • Create New...