maxvia Posted November 29, 2020 Share Posted November 29, 2020 Hi guys, I have added smooth scrolling within my application using locomotive. I have added it on top of my App component. It is working good and is not messing up with my animations that use scrolltrigger within my main App component however my animations that uses scrolltrigger within my children components don't work anymore. My triggers markers disappeared. In my main component I have added: const locoScroll = new LocomotiveScroll({ el: smoothScroll, smooth: true, }); locoScroll.on("scroll", ScrollTrigger.update); I am sure it is something dumb but what is the norm for working with both (gsap and locomotive) within React? Thank you! Link to comment Share on other sites More sharing options...
akapowl Posted November 29, 2020 Share Posted November 29, 2020 Hey @maxvia Have you hooked locomotive-scroll up to ScrollTrigger via .scrollerProxy? https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy() If not, check out the demo on that docs-page linked to, for an example on how to hook it up. If so, and you still cant get it working, please create a minimal demo (even without your react environment could help), so it's easier to help. 5 Link to comment Share on other sites More sharing options...
maxvia Posted December 1, 2020 Author Share Posted December 1, 2020 Hey @akapowl, thanks for the reply. I did try with locomotive or smooth-scroll but I have the same issue still happening. I believe it is probably a react issue with my dom fully loading after my gsap animation so that the height given to gsap is wrong. Anyway for now I will live it aside because I am not so sure I want some smooth scrolling on my app for user experience. 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