Jump to content


How to change text from array of strings with timeline?

Moderator Tag

Recommended Posts


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


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

      { 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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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




  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.