Jump to content
Search Community

SplitText special chars

GeorgeC20 test
Moderator Tag

Go to solution Solved by GreenSock,

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

I'm having to split and animate text that contains special characters and markup that the SplitText utility doesn't seem to handle. I've included a sample of the markup I'm dealing with and it contains an example of the types of characters that SplitText doesn't recognize (flames and apple chars, plus color markup). Since I'm pretty new to all of this I'm hoping there is an easy fix to my dilemma that I just haven't learned yet. I don't know if these are UTF-8 characters or what. I hope the characters will continue to show after I've posted them here. They are displayed properly by the browsers just not after I've split them. Any advice would be greatly appreciated. — George

 

<div id="quote">This Friday

Link to comment
Share on other sites

Hi!  I'm sorry, but I've actually already searched the forums looking for an answer and I did find the post you've mentioned.  Unfortunately, that post doesn't cover these characters. You can actually take these characters and paste them into that accompanying codepen and the solution fails to work on these chars. Try it! But thanks for your reply.

Link to comment
Share on other sites

The font color is probably a separate issue, but did you see this thread? 

http://greensock.com/forums/topic/13928-need-feature-splittext-works-with-img/

 

Lodash can split up those characters...

See the Pen ?editors=0010 by osublake (@osublake) on CodePen

 

And @CliCliC sent me the code for the version he modified. I might be able to send it to you, but let me pass that onto Jack first.

  • Like 3
Link to comment
Share on other sites

Thanks Jack.  Standing by.  OSUblake, I had not seen that post. And to think I thought I had searched thoroughly.  I appreciate your pointing this out to me. I'll see if I can find a solution there. Seems to me it should work at least until SplitText handles it natively. — George

Link to comment
Share on other sites

Okay, I put a bunch of work into SplitText so that the next version should support those emoji characters properly. I also made it capable of honoring some nested elements so that if you've got <span> stuff in there or <strong> or whatever, it should still work. Please kick the tires and see if you can break it at all. Here's a corrected version of your codepen with the new (experimental) SplitText: 

http://codepen.io/anon/pen/dpdQbZ?editors=1010

 

You can try out the preview of the next SplitText on codepen only, using this URL: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText.min.js (again, that's only for use on the codepen.io domain)

 

I'd really appreciate if y'all could hammer on it a bit and see if you can break it. I had to restructure quite a few things to accommodate these enhancements.  Thus far from what I've seen it's performing like a champ. 

  • Like 6
Link to comment
Share on other sites

Jack thanks so much for this amazing effort. So far it is unbreakable. It's quite robust and sturdy.  I'm going to keep trying to break it though. But it really looks good. Great job in such a short time :-P . Between this solution and Blake's I think we should mark this as solved. Would you agree? — George

  • Like 2
Link to comment
Share on other sites

Ok guys, I have kicked, hammered, tossed and stirred this experimental version of SplitText and I can't get it to budge.  It is as sturdy as it can be. It just won't break. I really need to get it into some type of beta download so that I can test it in a real-world environment. But honestly, from what I've seen so far I just don't see it breaking even in beta testing. You did a wonderful job Jack and I'm ready to use this.  This is going to immediately resolve some of my biggest work-around issues. Can I get a beta download on this? — George

Link to comment
Share on other sites

  • Solution

Excellent. Happy to hear that it has performed so well for you. 

 

I have gone ahead and dropped it into the official bonus download zip, so you can get it from your account dashboard (or any GSAP download screen). Let us know if that works well for you. 

  • Like 1
Link to comment
Share on other sites

Well, I may have finally broken it.  I'm not 100% sure of that since I am a novice here.  But please take a look at this pen:

See the Pen GjxqzK by CodeMaster7 (@CodeMaster7) on CodePen

 

The color markup is not showing on the text.  The color is showing fine in all of my other tests but there is something odd going on in this pen that I can't put a finger on.

Link to comment
Share on other sites

Wow, thanks Carl.  That's wonderful.  I just love you guys LOL.  So essentially the new version SplitText is working with ALL of my text animation routines.  I just have one more to test and I'm pretty confident all will work out well :-P . — George

Link to comment
Share on other sites

I believe I fixed that one case now too that caused it to break previously. It'd only happen if you split by only chars (not words or lines). But again, it should be all patched up now from what I can tell but please hammer away at it and tell me if you can break it. I updated the codepen URL as well as the "real" file in the members-only download zip. 

 

Have fun!

  • Like 1
Link to comment
Share on other sites

OK, Jack, everything is working great.  I'm quite happy with the performance. But, there is one minor thing I'd like for someone to look at. Now, this is NOT a show stopper by any means.  It's just a small nagging issue That I'm having trouble resolving.

 

I have this pen:

See the Pen amYPJQ by CodeMaster7 (@CodeMaster7) on CodePen

 

based on this pen: *original pen from Michael Dobekidis:

See the Pen DpbIy by netgfx (@netgfx) on CodePen

 

It is for exploding text.  I use SplitText where Michael is splitting it himself. My version used to work before the SplitText change. Now, it has a little issue at the end of the animation where everything falls apart.  I feel pretty confident that I simply need to figure out how to do this using the new SplitText.  The issue occurs when the timeline reverses. It doesn't come back together right.  I can stop using this particular animation until I have time to figure it out.  So there is no rush on this.  Anyone can take a look at it whenever.

 

Everybody, thanks so much for the hard work and dedication. I recently moved from Flash animation to CSS and one day I thought, "Darn, I wish I had GreenSock for this". I was unaware that GSAP existed. But I checked  your site and it just brought tears to my eyes I was so overjoyed.  And the reason for that joy is this very same type of support and dedication that you guys provide. You're a wonderful group of guys (that includes women) at GreenSock and the community of users is outstanding. I can't thank you enough. OK, enough of that.  Going back to work. — George

  • Like 1
Link to comment
Share on other sites

From what I can tell, that's not a bug at all - it's just that the code in that demo makes some faulty assumptions. First, it's using jQuery.offset(), so the top/left positioning is based on the PAGE position, but remember that CSS top/left is always relative to the offsetParent which is the closest parent that has position:absolute or position:relative. In this case, each word is wrapped in a <div> that has position:relative. So that's throwing things off. 

 

Even if you switch to using jQuery.position(), it looks like there's a bug in jQuery that's not returning the values properly. 

 

You could just set position:"absolute" on your SplitText which will do all that work for you. This would simplify your code too, and it's much more accurate.

 

But frankly, I think it's a big mistake to be animating the top/left properties and fontSize. You'll get significantly better performance (and your code would be simpler) if you just animate x/y (transforms) which don't affect layout. Basically, it's much cheaper for the browser to make changes to transforms rather than top/left. 

 

Does that clear things up?

 

Oh, and thanks so much for the kind words! We always love to hear from ex-Flashers who made the jump to HTML5 and used GSAP to ease their transition. Very happy to hear that it made things smoother for you. And I totally agree about the community around here. We're very blessed to have such good people who are eager to help and never make someone feel stupid. Cheers!

  • Like 1
Link to comment
Share on other sites

Great pun Jack:  Yes, GSAP did EASE my TRANSITION...  Thanks for looking at that issue for me.  I feel very confident now that I'll be able to get it working again. I appreciate the suggestions. And yes, you mentioned one of the major reasons I like this community: "such good people who are eager to help and never make someone feel stupid".  There just seems to be NO dumb questions here. People seem to understand that we are all different, have different skill sets and levels of expertise and comprehension. I've always felt that if one can't respond without demeaning or criticizing, then one shouldn't respond. It's what made me confident in using this forum.  During my searches I found no negative or derogatory comments. Just people trying to help others in need. — George

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