Jump to content
GreenSock

IndikatorDesign

textPlugin animation reverse in "TimelineMax"?

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

Hello guys,

 

does anyone know a way how to reverse the textanimation using the textPlugin or SplitText in conjunction with "TimelineMax"?

 

Wanna write some text with the textPlugin and a blinking cursor on the right and this works pretty well. But after I added the text, I wanna remove it beginning from the end, so that it looks like you're erasing the text and with the same delay until writing the text.

 

Can't find something like a reverse-direction (feature request) for the textPlugin..

 

I know how to split the text-chars in divs, but I really have no idea how I can remove the last divs one after the other using "TimelineMax".

 

(It's my first project with gsap. With jQuery and a setInterval it would be pretty simple to solve the problem, but I have no idea how it is possible to combine this solution with the "TimelineMax".

 

Someone with an idea?

 

Thank you and best regards, Bruno

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

With SplitText you could just quickly show the characters and then reverse the animation like:

 

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

 

Do you have a demo of the easy way with jQuery? I'm sure that would help us recommend the right solution. Thanks.

  • Like 3
Link to comment
Share on other sites

Hello Carl,

 

thanks for the feedback! I have to admit that this is less complicated than my solution looks.

 

I could solve it on this way for me. On my website it works very well, I do not know why it does not write the text inside the codepen. There is no error thrown and I think that I have installed all scripts..

 

See the Pen PjQQMy by IndikatorDesign (@IndikatorDesign) on CodePen

 

Link to comment
Share on other sites

Very sorry about that - there was a bug in 1.20.0/1.20.1 of TextPlugin that I'll be resolving very soon with a 1.20.2 push. For now, you can simply link to the 1.19.1 release instead. 

Link to comment
Share on other sites

Ah.. Yes.. Now it works.. Thanks!

 

It is possible with the Split plugin to make a difference in speed by "typing" and "deleting" the text. Please take a look in my demo. When deleting, the animation is faster than writing. And for the "function" in the end, it looks as if you would write it with the hand without such a linear behavior. For me it's looks pretty realistic..

Link to comment
Share on other sites

Are you saying you want us to tell you how to rebuild your existing animation, but with SplitText instead of using TextPlugin? Sorry, I'm not entirely clear on what you're asking. 

Link to comment
Share on other sites

Please take a look at the behavior of the animation from Carl. It looks very linear by showing and hiding the text with the SplitText plugin. My animation works with different speeds for showing and hiding the text, by using different timelines (but has also more code)..

 

1. Is this also possible with the SplitText plugin? ( You don't need to rebuild, but it would be nice to know how it works when it is possible.. )

 

2. Is it possible to use the TextPlugin to fade the text out as you can see it in my animation (deleting or overriding from right to left) or is it just possible to fade in and override from left to right?

 

3. If you look as GSAP-Pro on my code, what do you think? What would you do better?

Link to comment
Share on other sites

  • 2 weeks later...

Sorry about the delayed response. 

 

1. Sure, you can do this with SplitText. 

 

2. TextPlugin isn't for fading text in and out - it literally populates the text itself in a progressive way, in the DOM element. And no, there isn't a right-to-left option. 

 

3. It's definitely written in a different style than I'm used to, and I'd probably use a lot less code to do the same thing, but it's certainly not "bad" at all. I would avoid all setTimeout() and setInterval() calls, though, in favor of TweenLite.delayedCall() so that it's perfectly synchronized with the engine. Also, you can simply use the "delay" for stuff like this: 

//OLD
setTimeout( function() {
      TweenMax.set( [ intro, cursr, func ], { display : 'block'});
}, 2000 );

//NEW:
TweenMax.set( [ intro, cursr, func ], { display : 'block', delay:2 });

 

Happy tweening!

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