Choppy animations (am I even doing it right?)

[Fecka]

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.

[Carl]

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. 

 

 

 

 

[Fecka]

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!