wolfduck Posted March 22, 2020 Share Posted March 22, 2020 Hi. I need some basic help with gsap.timeline() in a react environment. See my code below: import React, { useRef, useEffect } from 'react' import gsap, { TweenMax, Linear } from 'gsap'; import { ReactComponent as Twitter } from '../assets/svg/social/twitter.svg' const NavBar = () => { let twitterIcon = useRef(null); const tl = gsap.timeline() // this is the hover effect, making it glow green (all attributes are correct) const glowAnimation = (icon) => { tl.to(icon, 0.3, {attr: {style: "fill: rgb(48,223,171)"}, ease: Linear}) } // This just sets the initial colour of the black svg to white useEffect(() => { TweenMax.set(twitterIcon, {attr: {"style": "fill: rgb(255,255,255)"}}) }) return ( <div className="navbar"> <a title="Twitter" target="_blank" rel="noopener noreferrer" // onMouseEnter={ glowAnimation({twitterIcon}) } // onMouseLeave={ something? reverse of tl } href="redacted"> <Twitter // This is an SVG imported as ReactComponent className="navbar__icon" title="Twitter" ref={el => {twitterIcon = el}} /> </a> </div> ) } export default NavBar The basic premise of this is that it is part of my header. It has only one twitter icon (svg) right now. I want to be able to add more icons in the future (e.g. facebook, github) hence why I want to be able to pass in some reference to an icon into a single gsap timeline to describe the hover animation (defined as glowAnimation function) when mouse over an icon, and reverse that timeline when mouse leaves that icon. So I created a function with that timeline. But I'm unsure how to pass the twitterIcon reference (made using useRef) into the onMouseEnter attribute. What am I doing wrong? And also, what can I put in the onMouseLeave attribute to reverse the glowAnimation function? Sorry if this is stupid Link to comment Share on other sites More sharing options...
wolfduck Posted March 22, 2020 Author Share Posted March 22, 2020 I've figured it out. The onMouseEnter attribute of the <a> tag surrounding the SVG component is supposed to take in a function, not just reference glowAnimation. So the below works: onMouseEnter={ () => glowAnimation(twitterIcon) } Still confused on how to now reverse that animation using onMouseLeave... Link to comment Share on other sites More sharing options...
Rodrigo Posted March 22, 2020 Share Posted March 22, 2020 Hi and welcome to the GreenSock forums. This basically has to do with encapsulation. Right now you're not using a DOM node element in the JSX, you're using a React component, which is it's own type of object <Twitter />. Because of that you should use forward ref in order to get the reference to the DOM node inside the child component in the parent component. Here is a simple example that shows how to accomplish that: https://codesandbox.io/s/react-hover-forward-ref-ybtgs Happy Tweening!!! 6 Link to comment Share on other sites More sharing options...
wolfduck Posted March 24, 2020 Author Share Posted March 24, 2020 Hi @Rodrigo, is there a reason you create your timeline in state? Why not just declare it within useEffect with a const variable name? Also thanks for your solution Link to comment Share on other sites More sharing options...
OSUblake Posted March 24, 2020 Share Posted March 24, 2020 3 hours ago, wolfduck said: Hi @Rodrigo, is there a reason you create your timeline in state? Why not just declare it within useEffect with a const variable name? How would you reverse it outside the function? With hooks, everything goes bye-bye on every render if you don't store it the "React way". And you don't need to use state. A ref is fine, but it adds more noise to your code because you have to use .current. https://codesandbox.io/s/react-hover-forward-ref-pthnx 4 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