Trabajador Posted October 27, 2023 Share Posted October 27, 2023 Please help me make the correct parallax effect for hero, I can’t do it and I don’t understand how to implement it ref - https://parallax-image-effect.webflow.io/ See the Pen qBgEyKQ by trabajador-the-flexboxer (@trabajador-the-flexboxer) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted October 27, 2023 Share Posted October 27, 2023 Hi, @Carl response in this thread should be a good starting point: The main issue in your code though seems to be related to using the same trigger element for both sections in your loop const mediaWrap = document.querySelectorAll('.page-hero'); mediaWrap.forEach(media => { const mediaImgs = media.querySelectorAll('.page-hero__bg img'); mediaImgs.forEach(img => { const heightDiff = img.offsetHeight - img.parentElement.offsetHeight; const parallaxComp = 140; gsap.to(img.parentElement, { y: -heightDiff + parallaxComp, scale: 1.1, scrollTrigger: { trigger: mediaWrap, start: `top top`, scrub: 1.5, }, }); }); }); In your code mediaWrap is just one element and your page-hero sections are two, so both start at the same time. I made a fork of your codepen here: See the Pen abXdNgd by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Trabajador Posted October 27, 2023 Author Share Posted October 27, 2023 @Rodrigo Thanks a lot! Have a good weekends 🙃 Just one question, why doesn’t parallax work without a scale? 1 Link to comment Share on other sites More sharing options...
Trabajador Posted October 27, 2023 Author Share Posted October 27, 2023 (edited) I need parallax like here I would appreciate your explanation and help! Edited October 28, 2023 by Trabajador Link to comment Share on other sites More sharing options...
Rodrigo Posted October 27, 2023 Share Posted October 27, 2023 Hi, You just created an infinite loop! The link in your previous post points to this thread! 🫠 Please review it and update it. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Trabajador Posted October 28, 2023 Author Share Posted October 28, 2023 updated Link to comment Share on other sites More sharing options...
Rodrigo Posted October 28, 2023 Share Posted October 28, 2023 Hi I'm on my phone now so I can't really tinker with the code, but in my first post in this thread I linked to another thread where @Carlactually provides a working demo of that particular effect Hopefully this helps Happy Tweening! Link to comment Share on other sites More sharing options...
Trabajador Posted October 28, 2023 Author Share Posted October 28, 2023 @Rodrigo How can I repeat this without backgound-img and changing background position ? Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted October 30, 2023 Solution Share Posted October 30, 2023 Hi, It shouldn't be more complicated than this: See the Pen BaMKdMo by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Trabajador Posted October 30, 2023 Author Share Posted October 30, 2023 Hello @Rodrigo Thank you a lot! 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