Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Splittexting inside a div that has spans with left and right padding

Go to solution Solved by PointC,

Recommended Posts

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

  • Solution

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.




  • Like 4
Link to comment
Share on other sites

Posted (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 by Chromium
  • Like 1
Link to comment
Share on other sites

@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

@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!

  • Like 1
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.