Jae P

Hey Zach, Thank you so much for your help and for the insight about GSAP 3 convention. The button is good now with a little bit of tweaks. As for the alternative, are there any performance differences between the solution you've provided and the alternative method you've mentioned? If there aren't any, which is more conventional? Thanks for your time -Jae

Hello, I've recently began using gsap. I was able to do everything fine until I found out I was unable to set a transfrom timer on CSS due to its conflict with gsap timer. Therefore, I've been trying to create a button hover animation by using gsap on reactjs. However, it is very weird and choppy. I cannot explain it. I will include a video and my code. I am using onMouseEnter and onMouseLeave as event listeners on my JSX file and passing a function over with the gsap animation code inside of it. I'm not really sure if it's the onMouseEnter/onMouseLeave indicators that's causing the choppiness. I've also tried onMouseOver/onMouseOut, but with same results. 1. useRef to target DOM elements let team = useRef(null) let teamLine = useRef(null) 2. functions used to set animations on call function mouseOver(evt) { tl.fromTo(team, 2.5, { x: "0" }, { x: "-30px", ease: Power2.ease }, 0) .to(teamLine, 2.5, { x: "100px", opacity: 1, ease: Power2.ease}, 0) } function mouseLeave(evt) { tl.fromTo(team, 2, { x: "-30px" }, { x: "0", ease: Power2.ease },0) .fromTo(teamLine, 2, { x: "100px", opacity: 1}, { x: "0", opacity: 0, ease: Power2.ease },0) 3. HTML element in JSX <div className='team-container' onMouseEnter={mouseOver} onMouseLeave={mouseLeave}> <Link class='team' to='/the-team' exact style={{ textDecoration: 'none' }}> <p ref={el => team = el}>Meet the Team</p> </Link> <div className='team-line' ref={el => teamLine = el}> </div> </div> 4. SASS .team { font-family: "Work Sans", sans-serif; color: white; width: 150px; height: 20px; letter-spacing: 0.1rem; position: relative; cursor: pointer; z-index: 5; } .team-line { position: absolute; height: 1px; top: 50%; width: 50px; background: white; opacity: 0; } What I am expecting: 'Meet the Team' text slides left of 30px as the invisible bar behind it slides to the right 100px while fading in Result: Clothing-Project - Google Chrome 2020-01-10 01-46-05.mp4