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!