Jump to content
Search Community

Use splittext to stretch out letters from a pile

Yes! test
Moderator Tag

Recommended Posts

I'm trying to start with a pile of all the letters up on top of one another on the right, and then stretch them out from right to left.  
 

If one could animate letter-spacing smoothly for instance, it would be something like letter-spacing 0 to letter-spacing 2 stretching from right to left, however I've not been able to get smooth animation using css letter-spacing. So I'm trying to do something similar using splittext. However I don't seem to be able to first pile up the letters on top of one another, and then stretch them out. It would make sense to use the set command to stack the letters. Hmmm... maybe I need a forEach loop with an incrementing distance?  Any ideas gratefully appreciated!

 

See the Pen RwwEbZV by LeafySeadragon (@LeafySeadragon) on CodePen

Link to comment
Share on other sites

Thanks Mikel,

I'm trying to first start from all the letters on top of each other in Z space, and then stretch them out with a bounce. Using margin-right I'm able to get some of them on top of each other in Z space,  but some of them are now also above and below in y space (on 3 lines) when i use margin-right with the negative number. why is that happening and how to stop it, so that it's just one line?  Also I don't seem to be able to get a nice bounce to happen at the end when I stretch them out again, or to stop them going on two or three lines for a moment or two... Any ideas?

See the Pen zYYyNNo by LeafySeadragon (@LeafySeadragon) on CodePen

 . - 

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.
×
×
  • Create New...