Jump to content
Search Community

Jerky Ease Movements (using 'x:')

ne0nlight test
Moderator Tag

Go to solution Solved by PointC,

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

First off, I have been diving into first attempts of javascript and animation, and simply love how intuitive and flexible gsap is. Amazing!


That said, I've done plenty of animations where this issue did not occur, however for some reason I am facing some jerky easing on the two side elements you see in the codepen provided and can't seem to figure out what is causing the issue. Any ideas? Thanks!

See the Pen kXJNrG by ne0nlight (@ne0nlight) on CodePen

  • Like 1
Link to comment
Share on other sites

  • Solution

Hi ne0nlight  :)


Welcome to the forums.


That is being caused by your CSS. You have this:

transition: all 0.4s ease;

on lines 55 & 73 for your .camera-center and .lighting-center classes. GSAP and CSS are fighting to control the animation. You'll get the best results by not mixing the two. If you remove that from your CSS, everything should work just fine for you.


Hopefully that helps.


Happy tweening.


  • Like 3
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...