React Opacity on Reverse

[boomspot]

Greetings, 

 

I'm working on an animation that displays text on page load by changing opacity from 0 to 1 and then on reverse the opacity reverses. The problem is the opacity is not changing to zero before the parent element close.  I'm just learning my way around Gsap so I appreciate the assistance. Here is my example playground with code:

 

Edit updated stackblitz:

https://stackblitz.com/edit/gsap-react-basic-f48716-14l3v4?file=src%2FApp.js

 

Thanks,

 

Dorian

Edited March 7 by boomspot
updated example repo

[mvaneijgen]

Hi @boomspot welcome to the forum and thanks for being a club member!

 

Is this going to be a button? Even if not check out this tutorial by our own @Carl with distinct enter and leave animations. Hope it helps and happy tweening! 

 

 

[boomspot]

Hello Mvaneijgen,

 

Thanks for the reply.  The plan is to have the animation start and loop on page load without any user interaction.  I'll check out the video and have signed up for Carl's gsap course, just need to find time to dig into it. 

 

Regards,

Dorian

[mvaneijgen]

Yeah, I think the logic @Carl uses will help you for your animation. Instead of reversing the animation just have a second part of the animation that animates it away again to its original position and then call .restart() when you want to replay it. 

 

Great course, highly recommend just pick a topic that intrest you most and then just watch a video a day.