Alex J. Posted June 9, 2023 Share Posted June 9, 2023 Hope everyone's doing well. I am working on a project where I am trying to achieve something similar to this website: https://ever.ru/ 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 More sharing options...
Carl Posted June 9, 2023 Share Posted June 9, 2023 Hi, 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: https://greensock.com/docs/v3/Plugins/Observer 2 Link to comment Share on other sites More sharing options...
Alex J. Posted June 9, 2023 Author Share Posted June 9, 2023 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? Thanks Link to comment Share on other sites More sharing options...
Carl Posted June 9, 2023 Share Posted June 9, 2023 This demo is a great example of combining ScrollTrigger and Observer See the Pen MWGVJYL?editors=0010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
Alex J. Posted June 10, 2023 Author Share Posted June 10, 2023 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 More sharing options...
GSAP Helper Posted June 10, 2023 Share Posted June 10, 2023 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now