KPC
Kevin Powell - Communitylko

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
b1mind
b1mind•488d 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/
lko
lko•488d 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
JWode•488d 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
JWode•488d ago
*there you go in the description, it's from as well.
lko
lko•487d 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
b1mind•487d ago
I don't use React Creates overcomplicated problems specially when working with a lib that's meant to work with the real Dom.
lko
lko•487d ago
Ok Thanks anyway
Want results from more Discord servers?
Add your server
More Posts
Finding the skewed offset of an elementI've a full width container, that has a `before` pseudo element that's 3/5's the width absolutely poSharp and Canvas error on NodeI have a project I'm trynna run for the first time, the codebase is an API backend written with exprtwo Filters on clickhere how can I add current and exits filter for all tabs, based on class or data setRetrieve and display the skuI need this H3 to display the sku of our products in Magento 1.9 <h3 class="product-name<?php echoOutput the skuI need this line of code to retrieve and display the sku and so far I cannot get it to echo the sku.NPM Package publishing setup done right... well, it saves you time.https://youtu.be/eh89VE3Mk5gVite issue with using local/custom fontsI'm trying to load a custom font: `@font-face { font-family: "Bellafair-Regular"; src: local("@is there a better way than performance.now() to tell how long the execution took?is there like a 1 line solution i think i saw someone who did it once but i can't remember but is thCan I add animations to this project?Project link: https://glistening-bombolone-928636.netlify.app/ I would like to try adding animationError message for no reasonI am just getting started with backend development with flask and it is showing an error messageNeed a CSS expert (Tailwindcss)I am trying to figure out chatGPT manage to stick the prompt area to the bottom. I copied their codeHelping you achieve the Grid Layout you wanthttps://grid.layoutit.com/Pseudo -elementPseudo-element z-index not working , I want the gradient background to be behind the parent element <datalist> inconsistencies across browsersIs there any reason why Firefox displays only text between the closing and opening `option` tag, whiLow-Visibility Font> What makes it different from traditional typography design is that it focuses on letterform distinhow to use gradient with variableslinear-gradient(rgb(var(--main-color-1)),rgb(var(--main-color-2)) ) why this is not workingRemarksAm not a UI/UX designer, I've been working and don't have a portfolio decided to make one at least 5RegEx with match() and replace()I have a regular expression that grabs the double quotes and value for an html tag attribute: `str.Occasional JS error from fast clicking?This error is popping out occasionally in console, from I'm guessing, clicking too fast? When I'm sWhy is this giving me an error?```js for(let i=0;jobCard.length;i++){ if(jobCard[i].classList.contains('hidden')) {