Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Daiko

gsap.to reverse and clearProps

Go to solution Solved by ZachSaucier,

Recommended Posts

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 post
Share on other sites

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

 

908404098_Screenshot2020-12-21at11_59_29.png.ddb9e6b2dd5a9e07f9d7b3664bbd07f9.png

Link to post
Share on other sites

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 post
Share on other sites

 

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

  • Like 2
Link to post
Share on other sites

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

  • Like 1
Link to post
Share on other sites

@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 post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×