en en en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en de en en fr en en ca en en en en en en en ms en en en en ru en fr en en sv en en en en en en en en en en en en en it en en en en en en en en en en en en en en en en en sv en en en en en en en en en en en en en en en en en en en ms en en de en en en en en en en en en de en de en hu en es en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
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?
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).
Share on other sites
Create an account or sign in to comment
You need to be a member in order to leave a comment
Sign up for a new account in our community. It's easy!
Register a new account
Already have an account? Sign in here.
Sign in to follow this   Followers 0
Go to topic listing
Recently Browsing   0 members
No registered users viewing this page.
TweenMax Text Plugin: delimeters to change how text strings are replaced?
“This stuff is so incredibly amazing I can't believe it. The level of details and options put into these things and the natural instinct GreenSock has for solving everyday problems is impressive.”
“@greensock is just pure awesomeness. What more can be said?”
“GSAP and CSS Transitions: I've done both, and its like comparing an F16 to a horse. Take like 10 minutes to try.”
“...obviously GSAP is incredible”
“The GreenSock animation platform is one of the most useful sets of tools in existence when it comes to web animation.”
“After searching around the web for alternatives, I found GreenSock to be the most performant.”
“There is no doubt that GreenSock is currently the best available tool for creating astonishing interactive websites and animation effects.”
“Spent today converting an animation to pure CSS, and then into GSAP. GreenSock was an order of magnitude easier. Love it.”
“Go and browse through FWA or Awwwards, then view source of anything you see that has cool animation and you will be surprised how widely GSAP is used.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.