Gsap .from doesnt work with useEffect[]

Im learning now GSAP, so I think it's a really simple question, anyway, the documentation says this:

gsap.from() - Like a backwards .to() where it animates "from" the values defined in the tween and ends at the element's current state.

gsap.from() - Like a backwards .to() where it animates "from" the values defined in the tween and ends at the element's current state.

Whenever I refresh the site, it happens what you see in the GIF https://i.imgur.com/JrVzB11.gif, the animation "glitches", why? I tried to make the animation start when I click the div and it works fine, it start 200px off and then gets in the right position (but it glitches if you click it before the animation ends https://i.imgur.com/owuOWU7.gif, here I first make it end, then I click quickly)

import { useEffect, useRef } from "react";
import gsap from "gsap";

export default function Home() {
  // Refs
  const title = useRef<HTMLDivElement>(null);
  useEffect(() => {
    gsap.from(title.current, { x: -200 });
  }, []);

  return (
    <>
      <div className="h-screen">
        <h1 className="uppercase text-[16vw] font-[770] m-auto w-fit" ref={title}>
          .
        </h1>
      </div>
    </>
  );
}

import { useEffect, useRef } from "react";
import gsap from "gsap";

export default function Home() {
  // Refs
  const title = useRef<HTMLDivElement>(null);
  useEffect(() => {
    gsap.from(title.current, { x: -200 });
  }, []);

  return (
    <>
      <div className="h-screen">
        <h1 className="uppercase text-[16vw] font-[770] m-auto w-fit" ref={title}>
          .
        </h1>
      </div>
    </>
  );
}

Imgur

7 Replies

b1mind•2y ago

Have you read through this? https://greensock.com/react-advanced/ There is another started guide for gsap in react but I can't find it atm cause I'm blind lol https://greensock.com/react/

lkoOP•2y ago

Thank you, no I didnt read it I'll read it later, and I'll see if I can fix my problem. Thanks again @b1mind

JWode•2y ago

I can't remember whether it's an issue with just fromTo or from as well, but have you tried immediateRender: false? https://greensock.com/immediaterender/ 9 times out of 10 that's the issue when I've got glitching animations

GreenSock

immediateRender demystified

The immediateRender property of from() and fromTo() tweens is one of those things you only find out about when it gives you unexpected results. from() and fromTo() tweens are special as they set immediateRender to true as soon as they are created. This helps especially when creating staggered bui...

JWode•2y ago

*there you go in the description, it's from as well.

lkoOP•2y ago

@b1mind Thank you, i read the documentation and now im able to make most of my things work, although there are a few problems:

import { useEffect, useLayoutEffect, useRef, useState } from "react";
import gsap from "gsap";
import Draggable from "gsap/dist/Draggable";

export default function Home() {
  // Refs
  const title = useRef(null);
  const app = useRef(null);
  // States
  const [weight, setWeight] = useState(100);

  useLayoutEffect(() => {
    gsap.registerPlugin(Draggable);
    let ctx = gsap.context(() => {
      gsap.to(".singleLetter", { x: -500, duration: 3 });
    }, app);
    return () => ctx.revert();
  }, []);

  useEffect(() => {...}, []);

  return (
    <>
      <div className="h-screen">
        <h1 ref={title} style={{ fontWeight: weight }}>
          <span className="singleLetter">ciao</span>
        </h1>
      </div>
    </>
  );
}

import { useEffect, useLayoutEffect, useRef, useState } from "react";
import gsap from "gsap";
import Draggable from "gsap/dist/Draggable";

export default function Home() {
  // Refs
  const title = useRef(null);
  const app = useRef(null);
  // States
  const [weight, setWeight] = useState(100);

  useLayoutEffect(() => {
    gsap.registerPlugin(Draggable);
    let ctx = gsap.context(() => {
      gsap.to(".singleLetter", { x: -500, duration: 3 });
    }, app);
    return () => ctx.revert();
  }, []);

  useEffect(() => {...}, []);

  return (
    <>
      <div className="h-screen">
        <h1 ref={title} style={{ fontWeight: weight }}>
          <span className="singleLetter">ciao</span>
        </h1>
      </div>
    </>
  );
}

I think Im using the useLayoutEffect correctly, but it's giving me this error:

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client.

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client.

And also, it cant found .singleLetter, any suggestion?

b1mind•2y ago

I don't use React Creates overcomplicated problems specially when working with a lib that's meant to work with the real Dom.

lkoOP•2y ago

Ok Thanks anyway

Gaming

Programming

Gsap .from doesnt work with useEffect[]