Obaid Nadeem Posted November 8, 2021 Share Posted November 8, 2021 I am working on this dynamic text animation, I want each character to translate one at a time but the whole text is translating at the same time. personalWeb-2021-11-08_17.45.34.mp4 The react code goes like: import React, { useRef, useState } from 'react' import { gsap, TweenMax, TweenLite, TimelineLite, Power3, Power2, Circ } from 'gsap'; import './TextAnimation.css' export const TextAnimation = () => { const [text, settext] = useState("Hello there people") const array = [] for (let i = 0; i < text.length; i++) { if (text[i] == " ") { array.push(" "); } else { array.push([text[i]]) } } window.onload = () => { array.map((item, i) => { console.log(`.char${i}`) gsap.to(`.char${i}`, 1.5, { translateY: "0px", ease: Power3.easeInOut, }) }) } return ( <div> <div className="text-container"> <div className="text"> { array.map((item, i) => <h1 className={`char${i}`} >{ item == " " ? <h1> </h1> : item } </h1>) } </div> </div> </div> ) } and the css is: div{ width:100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } .text-container{ width:100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } .text{ height: 3rem; /* background-color: blue; */ overflow: hidden; } h1{ font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 3rem; color: #282828; transform:translateY(45px); } How do I fix this ? Link to comment Share on other sites More sharing options...
OSUblake Posted November 8, 2021 Share Posted November 8, 2021 Hi, You should not use onload inside React. There is no guarantee that will run at the correct time, so it would be best to put your logic inside a useEffect/useLayoutEffect. If you haven't already, be sure to check out our React Guide. All your letters are animating at the same time because you aren't delaying or staggering them. Probably easiest to just do a stagger on a common class name. And going back to the React Guide, it's best to use the scoped selector. useLayoutEffect(() => { gsap.from(q(".char"), { yPercent: -100, stagger: 0.1, ease: "power3.inOut" }); }, []); If you need anymore help, here's CodeSandbox template you can fork. https://codesandbox.io/s/gsap-react-starter-ut42t 2 Link to comment Share on other sites More sharing options...
Obaid Nadeem Posted November 8, 2021 Author Share Posted November 8, 2021 3 hours ago, OSUblake said: Hi, You should not use onload inside React. There is no guarantee that will run at the correct time, so it would be best to put your logic inside a useEffect/useLayoutEffect. If you haven't already, be sure to check out our React Guide. All your letters are animating at the same time because you aren't delaying or staggering them. Probably easiest to just do a stagger on a common class name. And going back to the React Guide, it's best to use the scoped selector. useLayoutEffect(() => { gsap.from(q(".char"), { yPercent: -100, stagger: 0.1, ease: "power3.inOut" }); }, []); If you need anymore help, here's CodeSandbox template you can fork. https://codesandbox.io/s/gsap-react-starter-ut42t Amazing! I almost forgot about the stagger function. Thank you for reminding me 😅. I was giving delay, but then I realized that the delay will be same for every class. So I used a different variable and increased it in every iteration. Didn't used i because wanted a variable with much lower value. let j = 0.3; useEffect(() => { array.map((item, i) => { console.log(`.char${i}`) gsap.to(`.char${i}`, 1.5, { translateY: "0px", ease: Power3.easeInOut, delay: j }) j = j + 0.3; }) }) This worked for me. Link to comment Share on other sites More sharing options...
OSUblake Posted November 8, 2021 Share Posted November 8, 2021 For loops, you just need multiply the value by the index. It's the same as keeping track of a sum. array.map((item, i) => { console.log(`.char${i}`) gsap.to(`.char${i}`, 1.5, { translateY: "0px", ease: Power3.easeInOut, delay: i * 0.3 }) }) 2 Link to comment Share on other sites More sharing options...
Obaid Nadeem Posted November 9, 2021 Author Share Posted November 9, 2021 Impressing! I should step up my mathematics game ig XD Just did some minor updates as well: WhatsApp Video 2021-11-09 at 1.29.08 PM.mp4 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now