Jump to content
GreenSock

beau_dev

React.js navmenu (onHover) running only once(?)

Recommended Posts

I'm hovering on a div with mousover/mouseout handlers.

hoveron/hoveroff runs just fine...

but.. hovering back on... forces it to stick so that hoverOff is never triggered.

 

I feel like I've seen this before, but I can't tell where.

 

I'd really appreciate any help on this.

 

Many thanks in advance!

 

Sincerely,

 

Beau

 

 

link to video

 

handleMenuHoverOn(arg) {
    const {tl, refs } = this;
    BtnDB.btns.forEach((btn, idx) => {
      tl.to(
        refs[`dot-${btn.id}`],
        0.15,
        {
          x: btn.hoverPos
        },
        '-=0'
      );
      tl.to(
        refs[`text-${btn.id}`],
        0.5,
        {
          opacity: 1
        },
        '-=.5'
      )
    });
  }
  handleMenuHoverOff(arg) {
    const { tl, refs } = this;
    BtnDB.btns.forEach((btn, idx) => {
      
      tl.to(
        refs[`dot-${btn.id}`],
        1,
        {
          x: 0
        },
        '1'
      );
      tl.to(
        refs[`text-${btn.id}`],
        0.5,
        {
          opacity: 0
        },
        '-=.5'
      );
    });

 

Link to comment
Share on other sites

It's kinda tough to troubleshoot blind, but from what I can tell it seems like you're constantly reusing and populating the same "tl" (which I assume is a TimelineLite or TimelineMax). That's probably not a good idea, at least the way you're doing it. Remember, the playhead will keep moving forward in that timeline until it reaches the end, and then it'll stop. It looks like you're hard-coding positions where you're inserting tweens on hover/out, so what happens if the playhead is at 1.5 seconds and you insert a new tween at a time of 1? See the problem? It'll instantly set that new tween as if it was at 0.5 seconds. 

 

I'm not entirely sure what effect you're going for, but you could either: 

  1. Just create your timeline initially paused (but populated with the tweens), and then on hover play() it, and on hoverOff reverse() it. 
  2. Or recreate a new timeline instance each time you hover/out. Don't worry, the instances will automatically garbage collect. And GSAP is very fast, so you shouldn't have to worry about some huge cost to instantiating a new instance. 

If you're still having trouble, it'd be great to see a reduced test case in codepen so that we can see what's going on.

 

Happy tweening!

  • Like 5
Link to comment
Share on other sites

incredibly helpful... I'll try to work on a test case and post it.

 

Many thanks!

  • Like 1
Link to comment
Share on other sites

Your solution (#2) works!

 

beau.haus

 

thanks so much!

 

 

  • Like 1
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.
×