Visibility animation to and from happen in different points of the duration

[Vero]

Hello,

I have elements with timeline that are controlled by play and stop buttons. I want to ad a "visibility" animation option (the elements are set to visibility: visible by default so I made two animations, one is to (from original  state to hidden) and the other one is from (from hidden to original state). I'm having trouble chaining those animations because the animation "to" changes the visibility a the beginning of the duration and the animation from changes the visibility in the end of the duration so there is a delay of whatever the duration set to. I tried adding the immediateRender: false but it doesn't solve the problem.
Codesandbox here: https://codesandbox.io/s/nifty-voice-9jfsky?file=/src/App.js
Is there a way how to make both animation happen at the same point of the duration? I can't change the default visibility.

Thank you 

[Trapti]

Hi, 

 

You can use position parameter in a timeline to start the tweens at the same time. 

[Vero]

Perfect  I'll take a look at it, thank you.

[Vero]

It doesn't seem to solve my problem. I adjusted one of the codepens from your website.

From the gsap settings I would assume that the orange and the green box are going to animate at the same moment but the "from" animation is still happening at the end of the duration and the "to" animation is happening at the beginning of the duration. So there is a second delay with the same position and duration setting. 

See the Pen poKPvYp by vercamach (@vercamach) on CodePen

 

[Trapti]

Is this are you trying to achieve? I converted that to a timeline and added a position parameter "0" on each tween so that every tween start at 0.
 

See the Pen YzvVXXy?editors=1010 by tripti1410 (@tripti1410) on CodePen

[Vero]

Not really. What I have issue with is that if the position parameter is on let's say 0 and duration is 1, the change in the from animation is happening when the duration ends so at 1s and the to animation will happen at the beginning of the duration so at 0s.

If in the example we put the position parameter to 1s 

See the Pen abKwWKg by vercamach (@vercamach) on CodePen

 the animations are not consistently happening at the same time as I would expect.  When you press play, I would expect that either when the 1s hits the gray and orange squares will become hidden and the green one will appear or that the animations would happen at 2s after the duration. But "from" is happening at 1s and "to" is happening at 2s of the timeline. I need them to happen consistently at the same time or I need to understand why is it happening at different time to explain it to the users  . 

[mvaneijgen]

I think the examples you have at the moment are a bit weird. Because visibility: hidden; isn't a property that gets animated, but GSAP still takes the time to animate things. With the position parameter you tell GSAP to start its animation at that position, but the tween still takes the time of the duration you've set in consideration. 

 

Next to that you also have to remember that tweens have an ease by default, if you change the defaults ease to none everything will animate linearly and animations will be more consistently, but visually less appealing. 

 

See the Pen JjZJNxj?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen

 

There is  .to and .from, but there also is .set()(see the docs), this will just set the properties you want without any delay or animation and will just happen at the instant you want. 

 

See the Pen gOKRRbG?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen

[Vero]

Hello,
Thank you for looking into it . I know it is a weird example.
I was trying to achieve effect where one element disappears and another one appears at the same time without any ease or visible duration change. 
Would it be better to then use opacity: 0 with 0 duration? 

 

[mvaneijgen]

1 hour ago, mvaneijgen said:

There is  .to and .from, but there also is .set()(see the docs), this will just set the properties you want without any delay or animation and will just happen at the instant you want. 

 

I think a .set() would be better. First sentence of the docs:

 

Quote

Immediately sets properties of the target(s) accordingly - essentially a zero-duration to() tween with a more intuitive name. So the following lines produce identical results:

 

I had set opacity because that is a property that can be animated and thus worked better in your example where you do have a duration on a tween. 

[Vero]

Perfect I will try with set, thank you  .