Text Animation Effect

[Lord]

It is necessary to make an animation where the right piece of text shifts to the left and another word appears from the left piece

[Rodrigo]

Hi @Lord and welcome to the GreenSock forums!

 

Just use the Text Plugin with some inline elements:

https://greensock.com/docs/v3/Plugins/TextPlugin

 

Here is a super simple example:

See the Pen yLQjKjx by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Lord]

@Rodrigo thank you very much from the example. I will try to use it for my ticket

[Lord]

https://codesandbox.io/s/priceless-hoover-v3hdjq?file=/src/App.js

 

how to correctly display words in a loop so that they change in turn?
Now they change at the time of "writing" the word

Edited July 19, 2023 by Lord

[Rodrigo]

Hi,

 

What exactly is not working in the link you posted? More precisely what is the effect you are looking for?

 

Happy Tweening!

[Lord]

5 hours ago, Rodrigo said:

Hi,

 

What exactly is not working in the link you posted? More precisely what is the effect you are looking for?

 

Happy Tweening!

by reference, everything works as expected, but in my application the same code does not delete 2-3 letters without any changes.
What could be the reason?

And how to make this effect erase all letters in words except the last? That is, when he begins to erase the word, he does not erase the last letter, but smoothly changes its transparency and substitutes the first letter of the next word and then begins to write further the next word

 

hope i explained clearly

thanks

[Rodrigo]

Hi,

 

Maybe something like this:

const texts = ["Lorem", "Ipsum", "Dolor", "Amit", "Excepteur"];

export default function App() {
  const sloganWrapperRef = useRef(null);

  useLayoutEffect(() => {
    const ctx = gsap.context((self) => {
      const updatedTexts = [...texts];
      updatedTexts.shift();
      const tl = gsap.timeline();
      updatedTexts.forEach((text, i) => {
        tl
        .to("p span", {
          text: "",
          speed: 1
        }, "+=1")
        .to("p span", {
            speed: 1,
            text: text,
          }
        );
      });
    }, sloganWrapperRef);

    return () => ctx.revert();
  }, []);

  return (
    <div className="sloganWrapper" ref={sloganWrapperRef}>
      <p>
        <span>{texts[0]}</span> Smarter
      </p>
    </div>
  );
}

Here is a fork of your example:

https://codesandbox.io/s/bitter-lake-x9y3xp?file=/src/App.js

 

Hopefully this helps.

Happy Tweening!