12 replies

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

KP-C

Kevin Powell - Community•4y ago•

12 replies

lko

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.

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

Gsap .from doesnt work with useEffect[]

Similar Threads

Gsap .from doesnt work with useEffect[]

Similar Threads

Similar Threads

Similar Threads