Daiko Posted December 21, 2020 Share Posted December 21, 2020 Hello, I want to clearProps when iI scrollBack and when my reverse function animation is over to make my links not loosing their hover property. That's because my nav has two different opacity level: The active link is by default on 1, and the other links are by default on 0.3 and when I hover them they go on 0.5 for example. But after making the animation with gsap to hide them, on reverse the get inline styles from gsap that make my default hover not working anymore. Sorry but I'm new with gsap and I couldn't set a valid codepen using gsap3. In my app it works but not on these pen. Thanks a lot for your help See the Pen jOMLLpB?editors=0111 by Ceyar (@Ceyar) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted December 21, 2020 Share Posted December 21, 2020 Hey @Daiko, Welcome to the GreenSock Forum. You could hide the parent element. See the Pen GRjvOGX?editors=0010 by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 2 Link to comment Share on other sites More sharing options...
Daiko Posted December 21, 2020 Author Share Posted December 21, 2020 Hello @mikel, Thank you so much for your quick answer. What if I still need to animate multiple elements with delay between them? That was not mentioned in the codepen example, sorry. For example in the image below, I have to select .nav-slide-item elements and the .slide-title element. When I scroll down, they all get faded with a certain delay (does the stagger param do that?). The problem is that I can not wrap my buttons .nav-slide-item with a tag (if there is not other solution, I could do another trick but it will be nice if it's ok with gsap param). So is there a way to clean the elements from the injected javascript? Thank you Link to comment Share on other sites More sharing options...
mikel Posted December 21, 2020 Share Posted December 21, 2020 Hey @Daiko, You could hide the parent element li and add a stagger / neg stagger See the Pen QWKMaGy?editors=1010 by mikeK (@mikeK) on CodePen Is that what you expect? Happy staggering ... Mikel 2 Link to comment Share on other sites More sharing options...
mikel Posted December 21, 2020 Share Posted December 21, 2020 ... or you could use a class See the Pen NWRvXax?editors=1010 by mikeK (@mikeK) on CodePen 3 Link to comment Share on other sites More sharing options...
Daiko Posted December 21, 2020 Author Share Posted December 21, 2020 Hey @mikel, it make sense to me how you resolved the case. Thank you. But I changed the html markup to approach my case. I use a plugin for a slide and I got button to navigate slides. I cannot change the markup because it will break these one. If I only have buttons without wrappers, is there a way to remove inline properties? See the Pen gOwxozO by Ceyar (@Ceyar) on CodePen Maybe using this event and then firing the clearProps: all... But that didn't worked. onReverseComplete If there is not a clean way to make that, I will use a similar approach to yours but not overlapping with a wrapper but adding a wrapper inside the button and applying the hover to this one: <button class="slide-button is-active hide"> <span class="hover-wrapper">Button 1</span> </button> And that could be the solutions for me. By the way, thank you so much for your explanation. And seeing yours example help me a lot to understand how to use gsap. Link to comment Share on other sites More sharing options...
mikel Posted December 21, 2020 Share Posted December 21, 2020 Hey @Daiko, I have no idea how to resolve this conflict - maybe ZACH has one. A creative solution would be: use a different hover optics. See the Pen poEraOx by mikeK (@mikeK) on CodePen Happy improvising ... Mikel 2 Link to comment Share on other sites More sharing options...
Daiko Posted December 21, 2020 Author Share Posted December 21, 2020 @mikel Ok thank you for your help, I will try with your last example. I let this issue open for the moment and let you know what I did. Again. Thank you for your help and time. Have a nice day 👋 1 Link to comment Share on other sites More sharing options...
Solution ZachSaucier Posted December 21, 2020 Solution Share Posted December 21, 2020 I think you just need to use the animation's onReverseComplete event? Is this what you're wanting? See the Pen WNGEJRQ?editors=1010 by GreenSock (@GreenSock) on CodePen Thanks for making the minimal demo. 3 Link to comment Share on other sites More sharing options...
Daiko Posted December 22, 2020 Author Share Posted December 22, 2020 @ZachSaucier Yes it's absolutely that what I meant. But was using it wrong (without .set). Thank you very much for helping me. You are awesome!! Have a nice day 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