Jump to content
Search Community

SplitText inconsistent splitting behavior

Origine test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey there! 

First of all I've got to say GSAP is the most amazing animation library the web has to offer, so thank you GreenSock for the great work !

 

Back to the issue at hand, I've noticed an odd behavior when it comes to SplitText and the line splitting feature (could also be the case for chars and words) : as you see in the codepen that I forked from the actual GreenSock's demo,  when you are splitting one element, the splitting is made inside that element, BUT if you are splitting several elements, the splitting is made outside and actually wraps the element (which is, I feel, the logical behavior). See screenshots* attached if you can't see the codepen.

 

How do you feel about that? Is it a normal behavior to you? Having different splitting behaviors gets tricky when animating lines of copy that come from a CMS, as the number of lines that you feed SplitText with may vary…

 

*Screenshots :

Screen Shot 2018-06-18 at 11.52.58.png

Screen Shot 2018-06-18 at 11.53.08.png

See the Pen dKZrXq by origine (@origine) on CodePen

Edited by Origine
Formatting
Link to comment
Share on other sites

First of all, thanks for the kind words, @Origine! Glad to hear you're enjoying the tools. 

 

And yes, that's actually something that was intended to be a convenience, particularly back before SplitText was capable of splitting apart nested elements. The logic was that if someone tried splitting something that only had one child element, it'd be smarter to split inside that child (since, again, it wasn't possible to split multiple children). But that's probably not very useful anymore now that SplitText has evolved further. If anyone disagrees, let me know. 

 

I updated the codepen-specific flavor of SplitText if you want to try that out. 

  • Like 3
Link to comment
Share on other sites

Hey Jack, thanks for your reply ! It makes sense then if it is a legacy thing. To be honest I feel like it doesn't really matter whether the wrapping is done outside or inside the target, as long as you don't have to worry about exceptions and inconsistencies.

Do you think it still makes sense to have this feature since SplitText is now able to split apart nested elements?

 

 

  • Like 2
Link to comment
Share on other sites

6 hours ago, Origine said:

Do you think it still makes sense to have this feature since SplitText is now able to split apart nested elements?

 

I can't really think of a great reason at this point, no. I'll remove that in the next version (unless someone else chimes in with a good reason to keep it). Let me know if you need that file right away and I can get you an advanced copy, but like you said, it really doesn't break anything so you should be fine. 

 

Happy tweening!

  • Like 3
Link to comment
Share on other sites

3 hours ago, GreenSock said:

unless someone else chimes in with a good reason to keep it

 

I don't think there is any reason to keep it, but based on a bit of testing I did there is a good reason to remove it as the results of an interior vs  exterior wrap of tags does produce different results particularly reflow issues in some cases. It's easy enough to account for in a hardcoded site but as @Origine highlights it could be problematic in cms sites where you can't control content.

  • Like 2
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.
×
×
  • Create New...