boomspot Posted March 6 Share Posted March 6 (edited) 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 Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 7 Share Posted March 7 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! Link to comment Share on other sites More sharing options...
boomspot Posted March 7 Author Share Posted March 7 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 Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted March 7 Solution Share Posted March 7 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now