jaden Posted August 22, 2020 Share Posted August 22, 2020 I use splitting js to archive this, but wanted just to use GSAP on this project. Link to comment Share on other sites More sharing options...
PointC Posted August 22, 2020 Share Posted August 22, 2020 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. 2 Link to comment Share on other sites More sharing options...
PointC Posted August 22, 2020 Share Posted August 22, 2020 PS You can add a class to each character via the plugin. Is that what you meant? 2 Link to comment Share on other sites More sharing options...
Visual-Q Posted August 22, 2020 Share Posted August 22, 2020 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 2 Link to comment Share on other sites More sharing options...
PointC Posted August 22, 2020 Share Posted August 22, 2020 Interesting. So it looks like you need to add that splitting attribute to your target text and then you also need to write your own CSS keyframes. I think I'll stay with SplitText. 1 Link to comment Share on other sites More sharing options...
PointC Posted August 22, 2020 Share Posted August 22, 2020 I think @Visual-Q meant to link to the GSAP 3 version of the docs. We want to use that new syntax. https://greensock.com/docs/v3/Plugins/SplitText 3 Link to comment Share on other sites More sharing options...
Visual-Q Posted August 22, 2020 Share Posted August 22, 2020 Yeah sorry, what Criag said. Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted August 22, 2020 Share Posted August 22, 2020 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 More sharing options...
PointC Posted August 22, 2020 Share Posted August 22, 2020 1 hour ago, PointC said: I think I'll stay with SplitText. I stand by my original statement. 1 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted August 22, 2020 Share Posted August 22, 2020 I'm not sending people to use an alternative to GSAP SplitText, I was just responding to your original statement that CSS is required to use it. But since this was brought up @GreenSock in what ways does SplitText benefit users over Splitting.js (features, performance, browser support)? Link to comment Share on other sites More sharing options...
Visual-Q Posted August 22, 2020 Share Posted August 22, 2020 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. 3 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted August 22, 2020 Share Posted August 22, 2020 Understood. Im starting to get the point personally in general, I'll keep quite. Link to comment Share on other sites More sharing options...
GreenSock Posted August 22, 2020 Share Posted August 22, 2020 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. 👍 2 Link to comment Share on other sites More sharing options...
PointC Posted August 22, 2020 Share Posted August 22, 2020 I just hope the OP pops back with some more details so we can answer the question and get this thread back on track. Link to comment Share on other sites More sharing options...
Visual-Q Posted August 22, 2020 Share Posted August 22, 2020 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 More sharing options...
GreenSock Posted August 22, 2020 Share Posted August 22, 2020 My understanding was that maybe he/she wanted to take the words/letters that were split, and dump them into a data attribute of the parent or something? That should be quite simple. parent.setAttribute("data-words", split.words.join(" ")); 2 Link to comment Share on other sites More sharing options...
jaden Posted August 22, 2020 Author Share Posted August 22, 2020 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 More sharing options...
Visual-Q Posted August 23, 2020 Share Posted August 23, 2020 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 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 24, 2020 Share Posted August 24, 2020 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). 1 Link to comment Share on other sites More sharing options...
Visual-Q Posted August 24, 2020 Share Posted August 24, 2020 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 More sharing options...
PointC Posted August 24, 2020 Share Posted August 24, 2020 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 More sharing options...
ZachSaucier Posted August 24, 2020 Share Posted August 24, 2020 7 minutes ago, Visual-Q said: My example just reproduces what splitting js does adding the text of a 'split item' in to the value of a data attr. Understood, I was talking about an alternative way to approach it where you don't split things at all Link to comment Share on other sites More sharing options...
jaden Posted August 24, 2020 Author Share Posted August 24, 2020 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 More sharing options...
Visual-Q Posted August 24, 2020 Share Posted August 24, 2020 Does work pretty well as a selector for specific words if anyone ever needed to target for that, of course you need to know the words in advance for the css to work for this. Can also be used as a target for subsequent gsap animations in place of having to target the array index position. See the Pen wvGgbQG by Visual-Q (@Visual-Q) on CodePen 2 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