Jump to content
Search Community

Simple React hover icon example

wolfduck test
Moderator Tag

Recommended Posts

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

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

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

  • Like 6
Link to comment
Share on other sites

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

 

 

  • Like 4
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...