Jump to content
Search Community

Double scroll

hanslibuzli 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 everyone

 

I stumbled over a parallel scrolling issue and was hoping maybe someone would have some input :) 

 

I created a simplified version of my issue in the CodePen attached. I have two main containers with overflow: scroll one of them is fixed and overlays the other. When I scroll the overlaying container the background container should also scroll the same amount. Since the overlaying container blocks the background containers scroll I update the scroll position with JS. Unfortunately it seems the browser scroll is triggered before the eventListener which results in a jaggy experience. Even GSAP's rAF ticker is not fast enough..

 

Any ideas?

 

 

See the Pen VyMLyj by hanslibuzli (@hanslibuzli) on CodePen

Link to comment
Share on other sites

Hi @hanslibuzli

 

GSAP taps into the RAF ticker requestAnimationFrame() web API. But the scroll event is firing before the RAF is fired, since RAF is fired on every frame tick, whereas the scroll event is fired at a very high rate.

 

The best way to optimize scroll performance is with RAF like your trying to do but also taking advantage of debouncing. But you might want to look into this article by Paul Lewis regarding this

 

https://www.html5rocks.com/en/tutorials/speed/animations/

 

You might also want to look at throttling the scroll event.

 

Happy Tweening!

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