Jump to content
Search Community

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

beau_dev 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

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

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...