Dynamic Text Animation

[Obaid Nadeem]

 

 

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.

 

 

 

 

 

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("&nbsp;");
        } 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 == "&nbsp;" ? <h1>&nbsp;</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 ?

 

 

 

 

 

[OSUblake]

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

 

[Obaid Nadeem]

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. 

[OSUblake]

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
  })
})

 

[Obaid Nadeem]

 

 

Impressing! I should step up my mathematics game ig XD

 

Just did some minor updates as well: