Jump to content
Search Community

Repeating timeline elements get opacity and visibility set to 0 without animating. If they interact with an other timeline?

mvaneijgen test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

I'm having fun creating this animation. The two objects (mail and speech bubble) are on an infinite timeline.


Now I wanted to add some interaction to the animation, by allowing the visitor to click the elements and have them disappear. When doing so the items scale to 0 an onComplete I reset their scale and set autoAlpha to 0, so they stay hidden, until the animation repeats again. 


This all works fine, it animates fine back in, but the out animation does not play it just disappears. I can see that the shape is being animated, but  it's opacity and visibility get set to 0, so it looks like they disappear without an animation. 


I'm not including a demo, because I don't have time for that. Please fix my issue for free!

See the Pen jOzPLwY by mvaneijgen (@mvaneijgen) on CodePen

Link to comment
Share on other sites

  • Solution

Yep, that's a logic thing. You created conflicting animations. Remember, the first time a tween renders, it records the start/end values so that it can quickly interpolate between them. You created your tweens assuming a particular state (the initial one), but then if the user clicks, you're altering that state. So if they click before the end of that timeline runs the first time, the initial opacity/scale will be 0. See what I mean? 


Also, what if the user clicks right before the repeating timeline tries to animate the element out? You'll have BOTH timelines fighting for control, animating to different values. 


I would recommend a different approach that pauses the one timeline while the other is playing and then restart after a certain amount of delay:

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


Side note: I noticed you had repeatRefresh: true on a tween that had no repeat. That won't really do anything, FYI. It doesn't look up the chain and find ancestors with repeats.


Does that clear things up? 

Link to comment
Share on other sites

I knew that I was creating conflicting tweens, but I could not figure out why it was animating in fine (because I though that would be the tricky part), but not out. 


In my real animation the delays are much longer between tween and I never had it playing the out and click animation at the same time, but while making the demo I made everything a lot snappier and there it did happen.


Thanks! This is away better approach.

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