sirhclluk Posted May 24, 2022 Share Posted May 24, 2022 Is there something I'm doing wrong in this splittext example? The text animation is not the usual buttery smooth gsap I'm used to. Thanks See the Pen WNMZrzW?editors=1010 by sirhclluk (@sirhclluk) on CodePen Link to comment Share on other sites More sharing options...
Solution Cassie Posted May 24, 2022 Solution Share Posted May 24, 2022 Text can be awkward sometimes - Little better with will-change:transform added. See the Pen vYdeRgE by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
sirhclluk Posted May 24, 2022 Author Share Posted May 24, 2022 That does look better. What's the advantage of adding h1 > * { will-change: transform; } rather than h1 { will-change: transform; } Link to comment Share on other sites More sharing options...
elegantseagulls Posted May 24, 2022 Share Posted May 24, 2022 39 minutes ago, sirhclluk said: What's the advantage of adding The reason for the * selector is that SplitText is adding a div inside the <h1> and that is what is being transformed (not the h1). You could also use SplitText to add a class to your lines, and add the will-change to that class. Also, if you are just animating the lines, you may consider just splitting the lines in SplitText (excluding words and chars), so there isn't the extra <div>s being generated ( you may see some performance improvement by doing this, but I've not tested) 2 Link to comment Share on other sites More sharing options...
sirhclluk Posted May 24, 2022 Author Share Posted May 24, 2022 thank you both! 2 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