Jerky Ease Movements (using 'x:')

[ne0nlight 2 Likes (Newbie)]

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

[PointC 8,599 Likes (Superhero)]

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.

[ne0nlight 2 Likes (Newbie)]

Ahhh, of course! The laziness of placing 'all' comes back to bite me once again. Thanks @PointC !