Yes! Posted November 17, 2019 Share Posted November 17, 2019 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 More sharing options...
mikel Posted November 17, 2019 Share Posted November 17, 2019 Hey @Yes!, If I understand your issue correctly, I'm not sure. You can e.g. use margin-right and a neg stagger number (tweens the array of targets starting from the last) See the Pen KKKbPJY by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 2 Link to comment Share on other sites More sharing options...
Yes! Posted November 17, 2019 Author Share Posted November 17, 2019 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 More sharing options...
mikel Posted November 18, 2019 Share Posted November 18, 2019 Hey @Yes!, I am lost: what effect do you want to achieve? Using the new gsap 3 you have the possibility of function based values - here an example See the Pen pooqrQp by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 3 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