Slide in prepositioned, centered text

[MeLight]

Hi all,

 

first post here

 

I'm trying to achieve a slide in per word animation. I went for the .from() mechanism as it looks easy to first position the elements in their desired position, and then apply the animation.

 

The challenge is that the animated text has to be centered (in regards to it's containing element), and every new word that slides in should go directly to it's final position.

 

If this is the final position:

[ ------ word1 - word2 - word3 ----- ]

 

After first word slide in from the left, it should be:

[ ------ word1 - ------------------ ----- ]

 

So that word1 takes it's position in the final layout, rather than the center of the container. In the attached codepen you can see my attempts.

 

I can either make the slide animation as i wanted (with float:left), or the final (centered) position correctly, but without the correct animation.

 

Please advise.

See the Pen povZgaN by melightk (@melightk) on CodePen

[ZachSaucier]

Hey MeLight and welcome to the GreenSock forums! Thanks for being a Club GreenSock member.

The main issue here is that elements with display: inline (like spans by default) aren't affected by transforms like your attempt to animate the x property. If you use GSAP to set the display to inline-block instead, it will animate in the x direction. However, you need to make sure the spaces between elements are retained, so I also added spacer elements in the demo below. 

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

 

Side note: .innerText is more performant than .innerHTML if all you're doing is changing text  

[MeLight]

Hey Zack, thanks for the prompt reply and the extra tips!

 

Works like magic