Can GreenSock help reduce jitter in my Parallax?

[RZephyr07]

The company I work for wants to implement a parallax effect into their corporate website.

 

They tasked me with the job of creating a solution, and I had pretty good success basically just dropping in and using the basicScroll.js library.

 

I noticed the performance was pretty good, but not quite as good as our mockup in SquareSpace that uses the same effect. I added translateZ to force rending onto the GPU, but it's still just not quite there, with occasionally jittery animation when rapidly scrolling up and down.

 

One thing I noticed is that basicScroll might be excessively using requestAnimationFrame, whereas other implementations seem to be only onscroll. That's one possibility. Another possibility is that there is a more performant solution, such as with GSAP. I'm not sure though, since 3D transforms should be pretty darn good, based on my research.

 

Can I -- or even, should I -- recreate this using GSAP? I'm not quite sure what an optimal solution would look like from a coding perspective.

 

I'm not exactly advanced or even intermediate with Javascript, so forgive me. I do prefer to use vanilla Javascript when possible, since I am still learning... and it tends to be less bloated.

See the Pen XYgvNb by RZephyr07 (@RZephyr07) on CodePen

[Carl]

Sorry, not really sure what to tell you. I didn't see any animation in the demo and I'm not at all familiar with basicScroll.js so I don't what it's doing under the hood. I'd guess that the majority of high-end sites that have scroll-driven animation are using GreenSock with ScrollMagic. 

 

ScrollMagic hasn't been actively developed (or supported) for awhile but I'm confident it can handle what you need to do for this project and GSAP is highly optimized for performance.