clieee Posted September 8, 2020 Share Posted September 8, 2020 Hi, See my attached video clip, Im trying to find a good way to create this with SplitTextPlugin. My requirements are: - this text should support multiple lines (I will use it as a "headline component") What I'm having trouble understand the best way to accomplish is how they should come in / grow from the right within their word. Like a right: 0 as a starting point for each character within their word... ? animation-trimmed.mov Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 8, 2020 Share Posted September 8, 2020 Hey clieee. This animation has multiple things happening at the same time: Scaling each letter (it looks like the origin is something like "center right"). Translating each letter in the x direction. Rotating each letter in the y direction. Blurring (this is not performant in a browser - I'm betting you'll have to drop it for performance reasons). It looks like the origin for each letter is the bottom right of each word. So you likely want to split by letter and word so that you can have a container for each word. Absolutely positioning each letter is probably a good idea but you need to set an explicit width and height of each word before you set that (so it doesn't collapse its sizing). GSAP's staggers can help you with the timing. You'll want to stagger both by word and by letter (two staggers). 1 Link to comment Share on other sites More sharing options...
clieee Posted September 8, 2020 Author Share Posted September 8, 2020 @ZachSaucier thanks for looking into it. This is what I have so far, but feels like something is missing in timing, or if I misunderstood your stagger setup by word and by letter? See the Pen abNqYog by clieee (@clieee) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 8, 2020 Share Posted September 8, 2020 I was meaning something more like this where you loop through the words and stagger the letters of the word: See the Pen VwaQXRz?editors=0010 by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
clieee Posted September 8, 2020 Author Share Posted September 8, 2020 Haha, I realized that once you posted, so cool. Did something similar, now it's more of timing of everything, but have good control with each word and its chars. Thanks for that! Link to comment Share on other sites More sharing options...
Visual-Q Posted September 8, 2020 Share Posted September 8, 2020 Based off Zachs excellent structure... a few adjustments. See the Pen eYZVrpJ by Visual-Q (@Visual-Q) on CodePen 3 Link to comment Share on other sites More sharing options...
clieee Posted September 9, 2020 Author Share Posted September 9, 2020 This is my latest version, not sure which one that will perform the best? My thought was to go for transformX instead of tweening left property. See the Pen QWNQYav by clieee (@clieee) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 9, 2020 Share Posted September 9, 2020 5 hours ago, clieee said: go for transformX instead of tweening left property That's always a better option if it's doable 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