Jump to content
Search Community

TimelineMax reverse not working in React JS

JoeH test
Moderator Tag

Recommended Posts

I have a list item which looks like this

 

<li className="menu-list-item" onMouseEnter={menuItemHomeMouseEnter} onMouseLeave={menuItemHomeMouseLeave}>
  <div className="line" ref={menuItemHomeLineRef}/>
  <NavLink to="/" exact>
    Home
    <span className="mask" ref={menuItemHomeMask1Ref}><span>Home</span></span>
    <span className="mask" ref={menuItemHomeMask2Ref}><span>Home</span></span>
  </NavLink>
</li>

And then I have created my TimelineMax as follows

 

let menuItemHomeAnim = new TimelineMax({paused:true});
  menuItemHomeAnim.to(menuItemHomeMask1Ref.current, .6, {skewX: '12deg', translateX: '3px'});
  menuItemHomeAnim.to(menuItemHomeMask2Ref.current, .6, {skewX: '12deg', translateX: '-3px'}, '-=0.6');
  menuItemHomeAnim.to(menuItemHomeLineRef.current,  .6, {scale:1, ease:"elastic.out(0.5, 0.3)"},'-=0.4');

And then my mouseEnter and mouseLeave functions

 

function menuItemHomeMouseEnter() {
  menuItemHomeAnim.play();
}
function menuItemHomeMouseLeave() {
  menuItemHomeAnim.reverse();
}

As far as I can tell from documentation and looking at other examples this should work.

 

However what happens is that the animation plays and then doesn't reverse when the mouse is moved away from the list item. I have checked to see is the menuItemHomeMouseLeave function is triggering and it is.

Link to comment
Share on other sites

Hey Joe. I see you're using the old GSAP syntax. We highly recommend using GSAP 3 and the new syntax which is sleeker and lets you use the new features of GSAP 3. It's easy to upgrade:

 

As for your question, what you have looks pretty correct. If you'd like debugging help can you please recreate the issue in a minimal demo using something like CodeSandbox? 

 

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