flowen

timeline problem with splittext

Recommended Posts

hi!

 

In the code pen you see an animation for the menu. I use the splittext plugin as you can see. First time you open the menu, everything animates as intended. But after closing once, the second time it seems like it's ignoring the timeline. Been fiddling with it for a long time but can't seem to figure it out. Anyone has a hunch of what's going wrong?

 

 

Share this post


Link to post
Share on other sites

It looks like the main problem is that you're using a single TimelineLite for all of your animations even though they're non-linear and the timing is dynamic. 

 

There are many ways to fix this, but probably the easiest one is to just declare a new "tl" variable in your open and close handlers:

 

 

That way, their timing starts fresh each time. Previously, since you were dumping everything into a single timeline, the playhead would reach the end and then later when you added more tweens to the same timeline, its playhead would jump ahead because its startTime was so far in the past (and time had elapsed). It's not a bug - that's how it's supposed to work. But in your case, it looks like you wanted things to behave differently (fresh timing each time). 

 

Does that help?

  • Like 1

Share this post


Link to post
Share on other sites

ahhh understood! I didn't know/understand it worked like this, thanks for educating me! 

 

The only change to your code I want to propose would be to define 2 timelines for both animations at the top. Defining the timeline within the click event probably creates a new variable every time you press it. I assume this probably uses unnecessary extra memory. 

 

Saying this, I wonder if the animateCharsIn and Out also cause this problem. Perhaps it's all negligible?

 

 

edit: Aha, after testing my own assumption I noticed I'm getting the same behaviour if I just use one variable. I guess the question remains if the memory used for this is negligible. If I use this effect all over the website (titles, body content, etc) over and over again. Wouldn't that cause memory problems?

Share this post


Link to post
Share on other sites

Well you don't have to define it inside click event, you can just define it globally and call it on click. In fact, you can use same timeline for play and reverse if your desired effect is like that, but depends on how you want to do it. You can also split text just once, and define timeline on next line which will do the animation. After that you can simply reuse those timelines for open and close.

Share this post


Link to post
Share on other sites
2 minutes ago, Sahil said:

Well you don't have to define it inside click event, you can just define it globally and call it on click. In fact, you can use same timeline for play and reverse if your desired effect is like that, but depends on how you want to do it. You can also split text just once, and define timeline on next line which will do the animation. After that you can simply reuse those timelines for open and close.

I tested this and thats why I edited my previous post. If I define 2 global timelines for the menuIn and menuOut animations, they still have the same problem Jack described.

Share this post


Link to post
Share on other sites

Can you share that demo? I was trying to solve your problem yesterday before you deleted the question. In that demo, you were using same timeline throughout the pen which was main problem as pointed out by Jack.

 

Well I will post a simple demo which should give you idea and you can further make into your desired effect.

Share this post


Link to post
Share on other sites
2 minutes ago, Sahil said:

Can you share that demo? I was trying to solve your problem yesterday before you deleted the question. In that demo, you were using same timeline throughout the pen which was main problem as pointed out by Jack.

 

Well I will post a simple demo which should give you idea and you can further make into your desired effect.

ah,sorry about that ;) I remember I answered my own question in the other thread. 

 

I updated the codepen, with 2 global variables as timelines:  tlMenuIn and tlMenuOut

Share this post


Link to post
Share on other sites

I am not sure if that is right way to do it, your timeline gets modified every time you open and close. And if spammed with clicks, your animation goes on for few repetitions. Here is quick and ugly demo, see if it helps. This way you don't have to split text every single time. Here is a introductory tutorial about timelines in case you haven't seen it.

 

Red box is to toggle it, you can also see that if you repeatedly open and close your animation starts behaving odd, this way you have control over entire thing and won't have to worry about same behavior.

 

 

Share this post


Link to post
Share on other sites
36 minutes ago, Sahil said:

I am not sure if that is right way to do it, your timeline gets modified every time you open and close. And if spammed with clicks, your animation goes on for few repetitions. Here is quick and ugly demo, see if it helps. This way you don't have to split text every single time. Here is a introductory tutorial about timelines in case you haven't seen it.

 

Red box is to toggle it, you can also see that if you repeatedly open and close your animation starts behaving odd, this way you have control over entire thing and won't have to worry about same behavior.

 

 

7

 

 

 

Thanks for replying Sahil.

 

Difference between your and my animation is that I have and want a different out animation. So .reverse() is not an option. UX wise I want my out animation to be faster than the introduction, so I adjust the timeline for that. 

 

I hadn't tried the spammy clicks, makes sense to test like that. Is there an option in GSAP to prevent an animation from running twice? 

 

Guess that adds a new question/challenge :) 

 

 

Share this post


Link to post
Share on other sites

Ya you don't need to do anything, just move those timelines out of click functions and everything will be fine. Right now every time you click, new tweens are getting added to timeline. Just follow my demo and instead of 1 timeline use 2 and nothing more, it will workout perfect.

 

And ya GreenSock will automatically take control of any property new tween is animating, so as long as your both timelines are animating identical properties(which is obvious), you won't have same issues.

Share this post


Link to post
Share on other sites

That's exactly what I did in the codepen (double check please or otherwise use this link) and the problem still occurs. After closing the menu for the first time, it's hard to see the next splitText work in the next time you open the window.

Share this post


Link to post
Share on other sites

You are still doing same thing, you shouldn't add tweens to timeline on click events. Just define entire timelines separately and just play them on click.

Share this post


Link to post
Share on other sites

oh my bad, I misread/misunderstood.

I had to add a manual .restart() because after playing once, progress() didn't reset to 0. 

I also had to turn around the declarations of both animations. If I declare menuOut as last, the fromTo stagger will initially set .nav--project with opacity: 1. 

 

now it works correctly, thanks for teaching me!

  • Like 1

Share this post


Link to post
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.