Jump to content
Search Community

Reversing correct timeline in an "each" hover function with a click

smallio test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi all,

 

Been a while :)

 

Working on a project with a fullpage menu. On that menu I've got a line under each menu link which gets triggered on hover via the following statement. Unfortunately when I click any of said links and go to another page, when you open the menu again the corresponding line from the previous page is still visible. Obviously that hover out does not trigger due to the cursor not moving off the menu element, so we have to somehow do it via click.

 

One would think you could just check if the animation is reversed on click, if not reverse it... however no cigar as of yet. 

 

https://codepen.io/wsdesign/project/editor/XveMOR

 

Hopefully someone can see what's going wrong! 

 

Cheers,

Smallio

 

 

    $(".menu-link-wrap").each(function(i, element) {
      var tl = new TimelineMax({paused:true, reversed:true});
      var menuHoverLine = $(this).find(".menu-hover-line");
    
      tl.fromTo(menuHoverLine, 0.4, {
        scale:0
      }, {
        scale:1, 
        transformOrigin: "center",
        ease:Power1.easeInOut
      });
      
      function toggleReverse () {
        if (tl.reversed() === false) {
          tl.reverse();
        }
        else {
          console.log("already reversed")
        }
      }

      $(element).hover(menuLinkHover, menuLinkHover);
      $(element).click(toggleReverse);
    
      function menuLinkHover() {
        tl.reversed() ? tl.play() : tl.reverse();
      }
    });

 

 

 

 

 

Link to comment
Share on other sites

Hm, it's very difficult to troubleshoot blind (no codepen), but it seems like you may have a logic issue with the way you're handling the hover over/out and the click. You're calling the SAME method on hover over as you are hover out...and that's just toggling the reversed direction...but if the user clicks, you're forcing it to reverse...and then it's very likely that the hover out is getting called as well when the mouse leaves that element, thus it toggles the direction BACK to forward! 

 

Again, I'm theorizing because I can't really see what's going on or tinker with it, but that's my best guess at this point. 

 

It may be cleaner to make your logic explicit, like having BOTH the hover out AND the click call reverse(), but the hover over calls play(). 

 

Good luck! :)

  • Like 1
Link to comment
Share on other sites

@GreenSock

 

Thank you for the response. Yup totally understand that! I sucked it up & spent the last 40 mins getting it down to... well... still a lot of code but I've noted the problem area on lines 76 - 120. The previous code is needed for the menu to open (needed to show you the problem) and the code after is just to init barba (also needed to show you in context)

 

Sorry for the jumble but it's the best I can do lol.

 

Maybe you can make something of it?

 

Cheers,

Will

 

https://codepen.io/wsdesign/project/editor/XveMOR

Link to comment
Share on other sites

Thanks for the demo. In the future, please provide some instructions like "press the menu button in the top right to open the menu".

 

The key issue can be exposed by adding one console.log() to your hover 

 

function menuLinkHover() {
      console.log("hover" + $(this).text());
      tl.reversed() ? tl.play() : tl.reverse();
    }

 

 

https://codepen.io/GreenSock/project/editor/ZWGkoV

 

when you click on the "menu" button and click on "About" you will see hover gets logged 3 times. 2 of those times AFTER the click.

 

I put some code in a separate click handler as @GreenSock suggested (and was a great idea), but that won't work because 2 hovers get fired AFTER the click which undo anything that was done in the click function.

 

I think your easiest route forward is to just reset each timeline back to progress(0) whenever the menu is re-opened.

  • Like 3
Link to comment
Share on other sites

8 minutes ago, Carl said:

Thanks for the demo. In the future, please provide some instructions like "press the menu button in the top right to open the menu".

 

You got it :)

 

8 minutes ago, Carl said:

I put some code in a separate click handler as @GreenSock suggested (and was a great idea), but that won't work because 2 hovers get fired AFTER the click which undo anything that was done in the click function.

 

I think your easiest route forward is to just reset each timeline back to progress(0) whenever the menu is re-opened.

 

Thank you very much for the help :) Unfortunately I'm still seeing the problem on all browsers on your version. Any idea why?

 

Cheers,

Smallio

Link to comment
Share on other sites

41 minutes ago, Carl said:

Yes. I didn’t fix it. Just want you to see that you have to deal with those extra hover events somehow or reset the menu using a different event - like the opening of the menu.  

 

 

 

ah that would explain it. ?

 

Still trying! This is proving to be way more pesky then I initially thought lol... Shall share the fix once I find it :)

 

Cheers!

Link to comment
Share on other sites

Finally fixed... however I can't stop the 3 instances of the hover being called. Very strange behaviour. 

 

Tried stopPropagation() & preventDefault() to no success. Is there a way using gsap to fire events only once or something similar that might help?

 

Cheers.

Link to comment
Share on other sites

13 minutes ago, PointC said:

Have you tried mouseenter instead of mouseover?

 

Well I'll be dammed, it worked. Tried pretty much every other listener/handler in existence & somehow left that one out... Slightly embarrassing but also typical lol. ?

 

Any particular reason why it behaves differently? I tend to use hover & mouseover/out but might be using that more often now.

 

Thank you dude!

  • Like 1
Link to comment
Share on other sites

2 minutes ago, PointC said:

mouseenter doesn't bubble. It all depends on how you've structured your elements and which one has the listener. In this particular case I think mouseenter and mouseleave would be the way to go. 

 

https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter

 

Happy tweening.

:)

 

 

Yay no more stupid stopPropagation :DDD

 

:)

Link to comment
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.
×
×
  • Create New...