Jump to content
Search Community

Choppy animations (am I even doing it right?)

Fecka 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

Hi Greensock community! I'm relatively new to GSAP and javascript animations in general, so please bear with me.

I don't know if the question belongs in this forum, as I'm looking for general advice, but I thought I'd start here instead of stackoverflow first.


Anyway, I've started experimenting with a website which will be stuffed with animations, so working with GSAP is an obvious choice. The thing is however, that everything feels choppy with occasional FPS drops here and there. I've seen sites full of animations, but I remember most of them being smooth, so I don't know if I'm doing it entirely wrong, or it is just the nature of javascript animations.


The idea of my site is that It'll have 3(or more later on) vertical pages, and the visitor would be able to switch between them with arrows. The background would also move some amount with each switch, just like it does on some android phones. In the current version, I'm doing this by moving 3 fullscreen divs + a background image.  Is this the right way?


The code isn't well structured yet, and pretty much probably overcomplicated spaghetti, so sorry about that, but you should be able to see what I'm trying to do.


Anyway, here's what I currently have: 


EDIT: fork provided by Carl: 

See the Pen OjJEaY by GreenSock (@GreenSock) on CodePen


I hope you don't mind me asking this here, but I understand, if it's too general.

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


Thanks for the demo.


When I clicked on your demo it auto-refreshed a bunch of times. Not sure why. When I forked it, that issue went away. Probably something wrong on CodePen's end. I updated your post with a pen that doesn't do that.




Back to the issue at hand, your animation ran well on my machine and I didn't see any choppiness that would cause concern so its tough to diagnose.

I don't doubt that you are seeing it.


Although results can be mixed, in most cases you will get smoother performance if you animate x instead of left.

When you animate x, GSAP taps into css transforms under the hood which in most cases will provide the benefit of some GPU hardware acceleration. Animating the left positional property has some downsides like browsers won't render on sub-pixel values like left:100.3 whereas transforms will. 





  • Like 4
Link to comment
Share on other sites

Well, it seems it's just my browser then,  if both the result and the code looks good to you. And if pushing divs around like that is the proper(only?) way to do what I'm aiming for, then it means that I'm on the right track, thank you!

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...