Jump to content
Search Community

Option to use custom tag name in SplitText plugin

RolandSoos 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

As I'm a WordPress plugin developer, I usually meet a lot of different CSS selectors in themes. My current problem that there are themes, which simply overrule div and span tags like:

.pp-widget div {
    font-family: Montserrat,Arial,Helvetica,sans-serif;
    font-size: 16px;
    .........
    font-variant: normal;
    line-height: 170%;
}

 

I know that I can always write stronger CSS and such, but it's tilting at windmills.

 

It would be great if we would be able to utilize that HTML5 allows the use of custom named tags, so the SplitText plugin would wrap the chars/words inside <my-custom-tag></my-custom-tag>.

 

Currently SplitText has a parameters to set to use

{span: true}

 

My suggestion is to deprecate span option and create a tag option:

{tag: "span"}

{tag: "my-custom-tag"}

 

 

Proposed code change

 

_setPositionsAfterSplit = 
.....
tag = vars.tag ? vars.tag : (vars.span ? "span" : "div"),
  
  
_splitRawText =
.....
var tag = vars.tag ? vars.tag : (vars.span ? "span" : "div"),
  
  
p.split =
.....
tag = vars.tag ? vars.tag : (vars.span ? "span" : "div"),

 

Documentation

 

The SplitText documentation does not contain the span option: https://greensock.com/docs/Utilities/SplitText/SplitText()

Link to comment
Share on other sites

Thanks! Exactly what I needed.

 

var mySplitText = new SplitText("#quote", {type:"words,chars", tag: "my-custom-tag"});

 

See the Pen eQvWBJ by anon (@anon) on CodePen

 

 

Could you tell me when will you release the new version with this improvement?

 

When the release happen, you should add this option to the documentation of SplitText: https://greensock.com/docs/Utilities/SplitText/SplitText

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