Jump to content
Search Community

How to achieve smooth parallax effect with scrolltrigger and snap scroll?

Alex J. test
Moderator Tag

Recommended Posts

Hope everyone's doing well. I am working on a project where I am trying to achieve something similar to this website:



They have this smooth scroll parallax reveal animation which snaps the next section in place smoothly on scroll. I have no idea how they are doing it. 

Is there any already done example which is similar to this and can help me with understanding how this is working?

Thank you ) 

Link to comment
Share on other sites



First thing to note is that the site isn't technically scrolling. There are no scrollbars because the <body> has overflow:hidden


instead, the site is "simply" triggering a series of animations in response to the scrollwheel.


It's a more complicated animation setup but uses the same principle as this demo


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


That demo uses the Observer Plugin to respond to mouse-wheel actions


Check out:





  • Like 2
Link to comment
Share on other sites

Thanks for the demo @Carl I am actually using ScrollTrigger plugin for this website. Is there a way to achieve something similar using that? For some reason I am unable to reproduce the demo using ScrollTrigger and Observer, are those compatible together? 



Link to comment
Share on other sites

Sorry to keep bothering you @Carl but I am also using Smoothscroll for this website and the animations are not triggering on the parralax sections. Do you have any idea about what I could be doing wrong?

Thank you so much for your help. Really appreciate it!

Link to comment
Share on other sites

Hi @Alex J.. Did you mean ScrollSmoother? Smoothscroll isn't a GreenSock product, so we can't really support anything like that here. If you need help, please make sure you create a minimal demo that clearly isolates and illustrates the issue and we'd be happy to answer any GSAP-related questions. 


Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.


Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

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


If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.


Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

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