Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Slide in prepositioned, centered text

Recommended Posts

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

Share this post

Link to post
Share on other sites

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 :) 

  • Like 2
  • Thanks 1

Share this post

Link to post
Share on other sites

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


Works like magic

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.