Animate <p> background color

[FLYPILOT]

I've this split text animations, and I've a background color on a <p> and would like to animate this with the split text animation. Is that even possible?

See the Pen BaqQJZJ by jo-o-luiz-de-figueiredo-magalh-es (@jo-o-luiz-de-figueiredo-magalh-es) on CodePen

[Cassie]

Hey there! How are you aiming to animate it? Do you just want to change the background from blue to a different color?

[FLYPILOT]

Hey @Cassie thanks for reply to this. I want to change from transparent to blue, as the bg have the same time appearing than the text.

[GreenSock]

I'm having a hard time understanding exactly what you want, but the fundamental problem there was that the backgroundColor is on the parent element, not the things you were animating. If you're trying to animate the backgroundColor of each word, here's a quick demo: 

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

 

Hopefully that gets you going in the right direction. 👍

[FLYPILOT]

Thanks @GreenSock this is a half solution that I got here as well. However this don't have the same look as on the pen I've shared. With this we have empty spaces between the words.

 

I think, a lines and words solutions could work for me. 

animate each line and them animate the words for that line, is that even possible?

[GreenSock]

Here one way to do it: 

See the Pen QWZgVQG?editors=0010 by GreenSock (@GreenSock) on CodePen

[FLYPILOT]

Hey guys, thanks for the help.

I've found the solution in my project and I wasn't able to apply to the pen.

However here is the code for the solution:

 

splitTextTimeline
    .from(
      mySplitText.lines, 
      {
        delay: 0.5, 
        backgroundColor: 'transparent', 
        opacity: 0, 
        stagger: 0.35, 
        y: 10, 
        autoAlpha: 0,
      }
    )
    .from(
      mySplitText.words, 
      { 
        stagger: 0.15,
        duration: 0.4, 
        y: 10,
        autoAlpha: 0, 
        ease: "Power1.easeInOut",
      }, 
      "<+=0.2"
    )