Animations from a function timeline not willing to replay for a second time

[studioalloy]

I have this animation and in the JS tab on line 98 and 99 I recall the `notificationIn()` and `labelPop()` functions, but they will just not play for some reason, both elements that I try to animate where previously called with the same function and they worked fine and both got animated out with my function `scaleOut()` defined on line 73. I just can't for the live of me find the bug where I miss spelled something, it looks fine to me. 

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

[PointC]

Hi @mvaneijgen

 

The .add() method does not take parameters.

https://greensock.com/docs/TimelineMax/add

 

You'll want to use .call()

https://greensock.com/docs/TimelineMax/call()

 

So you'd write it like this:

.call(notificationIn, ["#notification__first"], this, "+=.5")

 

Another problem with calling the notificationIn() function a second time on the same element is your scaleOut() function. That function animates to a scale:0, but your notificationIn() function is animating scaleX from 0 to 1. You can fix that by changing the scaleOut() function to use scaleX instead of scale. 

 

Hopefully that helps. 

 

Happy tweening.

 

[studioalloy]

@PointC thanks! the `scaleX` was the culprit and add `opacity: 1` to the `labelPop()` function fixed that issue. 

 

I don't really get why I can't use `.add()` because my parameters are handled by my functions right? 

[Sahil]

Quote

The .add() method does not take parameters.

@PointC it seems correct to me as all functions are returning timelines only.

 

@mvaneijgen PointC is correct that only scaleX animates but scaleY remains 0.

 

Problem with '#label' is because of immediate rendering, when timeline is created all functions are called and in this particular case both set tweens are called but when second animation starts this set tween has already been called so that group remains hidden. It can be fixed by setting immediateRender to false.

 

See the Pen bLLdGr?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

Following video explains immediateRender in details,

 

 

Anybody else is getting buggy experience on codepen? I am getting annoyed for last few days, and now GSDevTools don't show up on any pen at the bottom, it stays hidden behind the bottom strip of codepen.

 

@GreenSock As I suggested, setting immediateRender to false fixes this behavior but instead if I set scaleX and scaleY explicitly, that also fixes the issue. Check line 38 in this demo. I know it is too complex demo but it is puzzling me, can you explain?

 

[PointC]

you're right - my mistake

 

I was always under the impression that's what .call() was used for and it's always my go-to move. I always use .add() for labels and adding timelines and .call() for everything with parameters. I guess I have call/parameters on the brain. I either learned something new today or re-learned something I had forgotten. At my age it's hard to know which one it is. 

 

 

 

[GreenSock]

11 hours ago, Sahil said:

@GreenSock As I suggested, setting immediateRender to false fixes this behavior but instead if I set scaleX and scaleY explicitly, that also fixes the issue. Check line 38 in

See the Pen xYYGrx?editors=0010 by Sahil89 (@Sahil89) on CodePen

I know it is too complex demo but it is puzzling me, can you explain?

 

I didn't quite understand your question (possibly because I'm very sleep-deprived). Would you mind being a bit more specific about what's causing confusion (expected behavior vs. what you're seeing)? Of course the most reduced case possible would help me diagnose things the quickest. 

[Sahil]

Ohk I will try to clarify, after checking further I found this to be happening only with GSDevTools enabled.

 

1. In demo there is only one set tween, which as we expect won't work second time due to immediate render.
2. With GSDevTools it still behaves same when you set scale only
3. But if you explicitly set both scaleX and scaleY then set tween takes effect both time which is unexpected to me.
4. And now if you remove GSDevTools it won't work which is expected.

See the Pen jZZBeL?editors=0010 by Sahil89 (@Sahil89) on CodePen