ARNM

Hello, I'm just building out a little navigation for myself to see what I can do with my current experience in GSAP and React js. I've got a button with two child span elements, their rotation value animates depending on useState, the click event handler also sets the state for the navigation panel which is initially hidden, then slides out from the right of viewport. It's kind of working how I want it to, except the onMouseLeave function (obviously) fires when the navigation button's state is rotated, so I need to address that. However, I'm starting to think that maybe I'm going about this the wrong way. I was just wondering if someone could check over my code and point out any glaring issues or offer some advice Here's a link to my code sandbox https://codesandbox.io/s/nav-hxcoml?file=/src/Nav.js

Hi @OSUblake, sorry for the delay in responding, the past two weeks have been hectic. I took what you suggested on board and spent some more time re-reading the docs, I have a habit of trying to run before I can walk... The whitespace bug has been resolved by killing the scrollTrigger and I've set up a wrapper element. Everything is working as intended. let el = useRef(); useLayoutEffect(() => { const q = gsap.utils.selector(el); const wrapper = el.current; gsap.set(q(".fancy-text"), { opacity: .2 }); gsap.to(q(".fancy-text"), { y: -50, opacity: 0, immediateRender: false, overwrite: 'auto', scrollTrigger: { trigger: wrapper, start: "top+=100px center", scrub: .5, markers:true } }); return () => ScrollTrigger.getAll().forEach(t => t.kill()); }, []) Thanks for your help, much appreciated

Hey, I'm new to GSAP and absolutely loving it! I'm currently working on my first commercial Gatsby React site and while experimenting with the useLayoutEffect hook I came across an issue. managed to rectify it and now I was just wondering if I could get a little context. When I started setting up my animations I was nesting each animation into a separate useLayoutEffect hook like so: const h2Ref = useRef(null); const contentRef = useRef(null); useLayoutEffect(() => { const el = h2Ref.current; gsap.set(el, { y: -30, opacity: 0 }); gsap.to(el, { y:0, opacity:1, delay:.25 }); gsap.to(el, { y: -50, opacity: 0, immediateRender: false, overwrite: 'auto', scrollTrigger: { trigger: el, start: "top+=100px center", scrub: .5, } }); }, []) useLayoutEffect(() => { const el2 = contentRef.current; gsap.set(el2, { y: -30, opacity: 0 }); gsap.to(el2, { y:0, opacity:1, delay:.25 }); gsap.to(el2, { y: -30, opacity: 0, immediateRender: false, overwrite: 'auto', scrollTrigger: { trigger: el2, start: "top+=100px center", scrub: .5, } }); }, []) Everything works fine just like this. As an experiment, I had a shift around and dropped several animations into a single useLayoutEffect hook to see if I could clean up my code a little bit. Like this: const h2Ref = useRef(null); const contentRef = useRef(null); useLayoutEffect(() => { const el = h2Ref.current; gsap.set(el, { y: -30, opacity: 0 }); gsap.to(el, { y:0, opacity:1, delay:.25 }); gsap.to(el, { y: -50, opacity: 0, immediateRender: false, overwrite: 'auto', scrollTrigger: { trigger: el, start: "top+=100px center", scrub: .5, } }); const el2 = contentRef.current; gsap.set(el2, { y: -30, opacity: 0 }); gsap.to(el2, { y:0, opacity:1, delay:.25 }); gsap.to(el2, { y: -30, opacity: 0, immediateRender: false, overwrite: 'auto', scrollTrigger: { trigger: el2, start: "top+=100px center", scrub: .5, } }); }, []) When I did that, I was ending up with masses of white space appearing at the bottom of the page whenever I changed to a new route. So really my question is more out of curiosity, why did this happen? Is this something to do with how hooks work or how GSAP works? Just hoping to get a little enlightened Many thanks, and thanks for such an awesome animation tool!