Jump to content
Search Community

Does SplitText have ability to add words or chars into data attribute of element that's wrapping them?

jaden test
Moderator Tag

Recommended Posts

Hi @jaden

 

I'm not following the question. You want to add data attributes to the divs after you split the text? Is that correct? You could do that with JavaScript if you wanted. What's the end goal? I'm not familiar with splitting.js, but if you could provide a few more details or a demo, we can probably point you in the right direction.

 

Happy tweenng.

:)

  • Like 2
Link to comment
Share on other sites

For reference, codepen of splitting js in action:

 

See the Pen LYVXWOJ by chriscoyier (@chriscoyier) on CodePen

 

It works quite differently from gsaps split text adding a lot of data attr to the elements it affects and appears to be controlling the propeties of css animations.

 

If you want to use gsap you'd be looking at using splittext. Before moving on to more advanced usage like you describe you may want to familiarize yourself with it:

 

Updated link to v3:

https://greensock.com/docs/v3/Plugins/SplitText

 

 

 

 

  • Like 2
Link to comment
Share on other sites

55 minutes ago, PointC said:

then you also need to write your own CSS keyframes

 

You can easily use GSAP. Codrops did a tutorial a while back also with GSAP + Splitting.js

See the Pen KKwPGyj by logan_liffick (@logan_liffick) on CodePen

 

But I honestly don't know if that library handles and addresses all that GSAP Splittext does for users.

Link to comment
Share on other sites

47 minutes ago, Shrug ¯\_(ツ)_/¯ said:

in what ways does SplitText benefit users over Splitting.

 

 I don't think we want to go down the rabbit hole of what amounts to reviewing other tools on this site, especially as people then want us to support them. People can evaluate whether they like Splitting js for themselves.

 

And that by the way is one answer... we support SplitText here.

 

 

  • Like 3
Link to comment
Share on other sites

Yeah, I always feel a little weird about doing these comparisons because it inevitably risks coming off like "my tool rocks, that other thing sucks" and I have huge respect for the author of Splitting.js so the last thing I'd want to do is insult something he spent time creating. He readily admits that Splitting.js is NOT meant as a replacement for SplitText. Plus, I have ZERO experience with it so I can't really do a fair comparison at this point but I think it's safe to say that SplitText is more feature-packed but if you only need simple stuff, Splitting.js is probably great. But again, I can't really vouch for it because I've literally never used it. 

 

@Shrug ¯\_(ツ)_/¯ don't worry about it - I don't think anyone meant that it's "bad" to even mention a competing product around here. No problem. Ultimately our goal is to help people first and foremost. If they want to use a different tool for the splitting part, and GSAP for the animation, so be it. We obviously can't support the other tool here, but we're glad to chime in on the GSAP-specific stuff. 👍

  • Like 2
Link to comment
Share on other sites

Well the original question is

 

Does SplitText have ability to add words or chars into data attribute of element that's wrapping them?

 

Updated for split text I think what jaden is asking:

 

Can you append new text into a split text object after it has been created?  The easiest way I guess would be to revert do a string replace and split again. Maybe Jack has a magical solution though.

Link to comment
Share on other sites

3 hours ago, PointC said:

I just hope the OP pops back with some more details so we can answer the question and get this thread back on track. :)

Sorry if I'm late to party, I saw your comments but wasn't near my PC :)

Here is the code pen:

See the Pen QWNdbpG by jadenjaden (@jadenjaden) on CodePen



Basically it adds data attribute with value of text (In this example I used words, works for single wrapped chars too) and I use content: attr(data) in CSS.
It helps me to keep HTML clean, because instead I would have to add 2x <div> Hello </div>. This obviously gets much more messy with real life examples and not code pen demo. 

Link to comment
Share on other sites

I wasn't exactly sure how to reference  a specific split text objects properties the way Jack showed, perhaps he can enlighten us mere mortals with a more fleshed out example.

 

I examined the splt text object in the browser tools and came up with this. It adds data attrs with the inner text content value to the outer item, words and chars divs though I'm sure there's a more elegant way to write it:

 

See the Pen poyRwZQ by Visual-Q (@Visual-Q) on CodePen

  • Like 1
Link to comment
Share on other sites

3 hours ago, ZachSaucier said:

I'd probably just set the data attribute in my HTML. That way you have full control over what the content is (like maybe different content than what's inside the element)

 

My example just reproduces what  splitting js does adding the text of a 'split item' in to the value of a data attr. Not sure why you would need that unless maybe you wanted a css selector to target a specific word or something. 

Link to comment
Share on other sites

I'm still not understanding the end objective. The OP mentioned keeping the HTML clean and the demo basically creates a clone of the word as a pseudo element so the rollover can slide back and forth. In a case like that I'd probably just split my chars or words and loop though to make a clone of each and position them wherever I wanted for the hover effect. But again, maybe I'm just being dense as I don't quite understand the objective. 🤷‍♂️

Link to comment
Share on other sites

11 minutes ago, PointC said:

I'm still not understanding the end objective. The OP mentioned keeping the HTML clean and the demo

My demo wasn't meant to make splitting.js look impressive, it was fast coded codepen to show the end goal. 

Yes you are right, the HTML is super bloated (I believe that you can make it cleaner with deleting char and words indexing in variable, which are meant for CSS keyframes anyway). But the point is keeping the HTML clean while it's in production, while you are working with it. 

Yes, there is much easier way to recreate my demo with cleaner HTML, but say there are lots of paragraphs on the page, it would suck if you had to enter the data attributes manualy, so what I was asking, if there was automated way with splitText.

It looks like @Visual-Q has a solution in his codepen, if I had known JS any better I wouldn't have to ask it, thank you :) 

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