How to change text from array of strings with timeline?

[Bahaa]

 

I have a div called fade and span called caption, I want GSAP to change the background color of fade and inner text of caption

This code is changing the background color of element fade but it does not do with the element caption

gsap.registerPlugin(TextPlugin);

const colors = ["black", "#4d0000", "#800000", "#330000"];

let captions=['some text','some text','some text','some text'];

 

const tl = gsap.timeline({ repeat: -1 });

for (let i = 0; i < colors.length; i++) {
    tl.to(fade, { duration: 0.4, backgroundColor: colors[i] });

    tl.fromTo(
      caption,
      { text: { value: captions[i] }, opacity: 0 },
      { duration: 3.5, opacity: 1 }, "<" );
  }

 

why the caption text is not changed although the background color is changed normally ?

 

 

See the Pen by Bahaa1985 (@Bahaa1985) on CodePen

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

It looks like you only defined the text in the "from" part of your tween, but there's nothing in the "to" part, so there won't be any animation of that. Perhaps you meant to put it in the "to" part? Make sure you load/register the TextPlugin too. 

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[jackkemm]

Hi @Bahaa,

 

I had a go at your code following on from what @GSAP Helper said about the use of fromTo().

 

To animate, there needs to be a from value, so I am just using the current innerText of the caption div/span to give it a place to animate from.

 

Also to note, your captions were all the same too so I added a number to them to visually show they're changing too.

 

See below:

See the Pen bGxrNBj by jackkemm (@jackkemm) on CodePen

 

Thanks,

Jack

[Rodrigo]

Hi @Bahaa and welcome to the GreenSock forums!

 

Maybe you're looking for something like this:

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

 

Hopefully this helps.

Happy Tweening!