momo12 Posted September 30, 2022 Share Posted September 30, 2022 Guys I have a question. on the demo website of Locomotive https://locomotivemtl.github.io/locomotive-scroll/ You can see the background image is moving a bit while we scroll up or down (Parallex Effect) I have no idea what should I do. Any suggestion or example would be appreciated! See the Pen yLjKmja?editors=1010 by talewoy290 (@talewoy290) on CodePen Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted September 30, 2022 Solution Share Posted September 30, 2022 Hi, The easiest way to achieve that is with ScrollSmoother: See the Pen PoOpobM by GreenSock (@GreenSock) on CodePen Also this can be done with ScrollTrigger but is not exactly the same effect: See the Pen QWjjYEw by GreenSock (@GreenSock) on CodePen See the Pen rNJQPXz by GreenSock (@GreenSock) on CodePen Happy Tweening! Link to comment Share on other sites More sharing options...
momo12 Posted September 30, 2022 Author Share Posted September 30, 2022 15 minutes ago, Rodrigo said: Hi, The easiest way to achieve that is with ScrollSmoother: Also this can be done with ScrollTrigger but is not exactly the same effect: Happy Tweening! I mean something like this https://tympanus.net/codrops/2022/08/03/large-image-to-content-page-transition/ I think that's different from what you have showed me ... Isn't it? @Rodrigo The first few seconds show a smooth effect of how the background position changes Link to comment Share on other sites More sharing options...
Rodrigo Posted September 30, 2022 Share Posted September 30, 2022 You mean when you scroll or when you click an image? For the scrolling they are using Lenis, it says so in the article: Quote For the smooth page scroll we are using Lenis and GSAP’s Flip plugin lets us easily animate the large image to its place in the content area. You can achieve the same effect with Smooth Scroller for what is worth, using the native scroll bar. Link to comment Share on other sites More sharing options...
momo12 Posted September 30, 2022 Author Share Posted September 30, 2022 3 minutes ago, Rodrigo said: You mean when you scroll or when you click an image? For the scrolling they are using Lenis, it says so in the article: You can achieve the same effect with Smooth Scroller for what is worth, using the native scroll bar. Thanks, I'm getting confused now!! :)) I used Locomotive and GSAP for something ... Now can't change the smooth scroll library. I made some changes to the Codepen. Could you please have a look? It's not running ... Thanks a lot! Link to comment Share on other sites More sharing options...
momo12 Posted October 1, 2022 Author Share Posted October 1, 2022 Solved! I found the solution .. Thanks to what rodrigo posted here 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