JoeH Posted October 13, 2020 Share Posted October 13, 2020 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 More sharing options...
ZachSaucier Posted October 13, 2020 Share Posted October 13, 2020 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? 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now