Forpee Posted May 16, 2021 Share Posted May 16, 2021 Hello All, Please can someone help me convert this codepen to react. I tried to remove some of the fluff (like the loader and some css) but it seems the scroll animation freezes halfway through after my changes. Specifically, I would like to also get this demo to work without including document.body.style.overflow = "auto"; https://codesandbox.io/s/muddy-sound-qqvud?file=/src/App.js See the Pen BaogqYy by noeldelgado (@noeldelgado) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted May 16, 2021 Share Posted May 16, 2021 Hi, Adding a start point to your ScrollTrigger instances seems to work: gsap.fromTo( w, { x }, { x: xEnd, scrollTrigger: { trigger: section, start: "top 92%", scrub: 0.5 } } ); Also it's a good idea to pass an array of dependencies to your useEffect hook in order to prevent it from running everytime the state or a property of the component is updated: useEffect(() => { // code here }, []); The array can have dependencies or not, read more about it here: https://reactjs.org/docs/hooks-effect.html Happy Tweening!!! 2 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