Chromium Posted April 14, 2022 Share Posted April 14, 2022 Say I have the following: <p>This is a line split by a special span here <span style="padding: 0 5px;">*</span> but we're still going.</p> The problem with any kind of left and right padding inside of a split text seems that the splittext cannot handle it. And instead, we're left with the padding being abruptly added at the end of the splittext animation. I tried to add a simultaneous animation for the padding but that obviously doesn't work because the splittext overwrites the content during splittexting with divs as you're probably already aware. How would you suggest handling an inline-span with a left/right padding within a splittext div? Link to comment Share on other sites More sharing options...
Solution PointC Posted April 14, 2022 Solution Share Posted April 14, 2022 I don't think that will be a problem at all. The span will keep its padding. You can put it inline like your post or in the CSS like this demo. I upped the px just to make it obvious. See the Pen 011a35f55d004804f75ec405534ddfb8 by PointC (@PointC) on CodePen Happy tweening. 4 Link to comment Share on other sites More sharing options...
Chromium Posted April 14, 2022 Author Share Posted April 14, 2022 (edited) Ah yes! Thank you for the confirmation PointC. That's why I couldn't replicate it in a CodePen. I suppose it's not possible to test an older version of GSAP with CodePen is it? I wonder if this is a glitch only applicable to an older version of GSAP. EDIT: Yup it was an old version of GSAP that had the glitch. 😅 Edited April 14, 2022 by Chromium Update 1 Link to comment Share on other sites More sharing options...
mvaneijgen Posted April 14, 2022 Share Posted April 14, 2022 @Chromium you can test any version you like on codepen, just select the version you want from https://unpkg.com/browse/gsap@3.10.3/ The oldest version is https://unpkg.com/browse/gsap@1.13.2/ 4 Link to comment Share on other sites More sharing options...
Chromium Posted April 14, 2022 Author Share Posted April 14, 2022 @mvaneijgen Sorry I'm still a little unclear on this. I've attached a screenshot of GSAP's starter template for example. Are you saying I can do this by changing the number 3 in the screenshot to whatever version I wanna test? What about GSAP plugin versions? Can I also test different versions of those? If so, do I just have to find wherever the number 3 is in those pictures and change it for the plugins? Link to comment Share on other sites More sharing options...
mvaneijgen Posted April 14, 2022 Share Posted April 14, 2022 @Chromium indeed @3 gets you the latest version 3, but if you give it the number of a release. Lets say 3.4.2 it will look something like this https://unpkg.com/browse/gsap@3.4.2/dist/gsap.js and here is the same version but now the CSSRulePlugin https://unpkg.com/browse/gsap@3.4.2/dist/CSSRulePlugin.js. On the page I originally linked there is a dropdown in the upper right corner which has a list on all the versions. Just pick a release you want to test. The only thing is that the paid plugins are not publicly accessible that way. Good luck! 1 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