Jump to content
GreenSock

flash08

TweenMax Text Plugin: delimeters to change how text strings are replaced?

Recommended Posts

I'm trying to come up with a lightweight "news ticker" type of animation. Just maybe 2 different lines of text, one replacing the other in a loop.

 

No problem with the looping or the use of the TextPlugIn. But the docs allude to how one can create custom delimeters to change the way the animation works with the text.

 

I've played around with the jQuery news tickers out there, but thus far, none of them seem to work reliably in the context of a client's  e-commerce site, which apparently was constructed by someone who had no real concept of good HTML5 coding practice. I have a different TweenMax animation running on that site now, so it wouldn't be an issue to just write a different TweenMax animation - it just works.

 

How do custom delimeters for theTextPlugIn work?

 

TIA!

Link to comment
Share on other sites

The docs are here:

http://greensock.com/docs/#/HTML5/GSAP/Plugins/TextPlugin/

 

An excerpt: 

If you'd like to use a different delimiter so that instead of replacing character-by-character, it gets replaced word-by-word, just pass an object with configuration properties like this:
//replaces word-by-word because the delimiter is " " (a space)
TweenLite.to(yourElement, 2, {text:{value:"This is the new text", delimiter:" "}, ease:Linear.easeNone});

Does that clear things up? If you're having trouble, it'd be super helpful to see a codepen so that we can identify exactly what's going on in your code (the simpler the better). 

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