MeLight Posted January 14, 2020 Share Posted January 14, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 14, 2020 Share Posted January 14, 2020 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 2 1 Link to comment Share on other sites More sharing options...
MeLight Posted January 14, 2020 Author Share Posted January 14, 2020 Hey Zack, thanks for the prompt reply and the extra tips! Works like magic Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now