gsap.to reverse and clearProps

[Daiko]

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.

[mikel]

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

 

[Daiko]

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

 

[mikel]

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

[mikel]

 

 

... or you could use a class

 

See the Pen NWRvXax?editors=1010 by mikeK (@mikeK) on CodePen.

 

 

[Daiko]

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.

[mikel]

 

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

[Daiko]

@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 ?

[ZachSaucier]

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.

[Daiko]

@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