Jump to content
Search Community

GSAP hover animation includes nested elements

nevo_e test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

I am using GSAP and Material UI with React. In the application I list my data in rows and I would like to slightly rotate the entire row, named Grid (id="target), with it's content when I am hovering over it. Instead of this the animation does not occur when I hover over for example buttons or text that is inside of it.
```
import React from 'react'
import { Container, Grid } from '@material-ui/core';
import gsap from 'gsap';



const List = ({ list }) => {


    const handleHover = e => {
        console.log(e.target)
        gsap.to(e.target, {
          duration: 0.3,
          y:3,
          skewX: 4,
          ease: "power3.inOut"
        });
      };
    
    const handleHoverExit = e => {
        console.log(e.target)
        gsap.to(e.target, {
            duration: 0.3,
            y:-3,
            skewX: 0,
            ease: "power3.inOut"
        });
    };

    return (
        <div>
            <Container maxWidth="lg">
                    <Grid container spacing={3}>
                    { list.map((element, index) => 
                        element.selected && (
                        <Grid
                            id="target"
                            item
                            key={index}
                            xs={12}
                            onMouseEnter={e => handleHover(e)} 
                            onMouseOut={e => handleHoverExit(e)}
                            >
                            ...CONTENT
                        </Grid>
                    ))}
                    </Grid>
                </Container>

        </div>
    )
}

export default List
```
Link to comment
Share on other sites

1 minute ago, OSUblake said:

Welcome to the forums @nevo_e

 

Did you mean currentTarget instead of target?

Hello! First of all thank you for your hospitality :) . But no, target is just random id so you can identify the tag easily. I do not know what currentTarget is.

Link to comment
Share on other sites

More information about currentTarget.

 

Quote

The currentTarget read-only property of the Event interface identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to Event.target, which identifies the element on which the event occurred and which may be its descendant.

 

https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

 

  • Like 1
Link to comment
Share on other sites

6 minutes ago, OSUblake said:

More information about currentTarget.

 

 

https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

 

Okay I understand it now, but it still does not work perfectly when I hover over some more nested elements. I made a similar example in this codepen. You will see that when you hover over line2 or line3, the animation ends.

EDIT: I need to learn how to edit codepens so please just replace Babel at the example you provided with mine.

See the Pen ZEKJPLa?editors=1111 by GreenSock (@GreenSock) on CodePen


const { useEffect, useState } = React;

function App() {
  
  const onEnter = ({ currentTarget }) => {
    gsap.to(currentTarget, { backgroundColor: "#e77614", scale: 1.2 });
  };
  
  const onLeave = ({ currentTarget }) => {
    gsap.to(currentTarget, { backgroundColor: "#28a92b", scale: 1 });
  };
  
      const handleHover = ({ currentTarget }) => {
        gsap.to(currentTarget, {
          duration: 0.3,
          y:3,
          skewX: 4,
          ease: "power3.inOut"
        });
      };
    
    const handleHoverExit = ({ currentTarget }) => {
        gsap.to(currentTarget, {
            duration: 0.3,
            y:-3,
            skewX: 0,
            ease: "power3.inOut"
        });
    };

  return (
    <div className="app flex-row">
      <div
        style={{border: "1px white solid"}}
        onMouseEnter={handleHover} 
        onMouseOut={handleHoverExit}
        >
        <div>
          <div>
            line1
          </div>
          <div>
            line2
            <span>
              line3
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector("#root"));
 

Link to comment
Share on other sites

  • Solution
6 minutes ago, nevo_e said:

I need to learn how to edit codepens

 

Just click the fork button in the bottom right.

 

image.png

 

And I would use mouseleave instead of mouseout for the event. There is a difference.

 

Quote

mouseleave and mouseout are similar but differ in that mouseleave does not bubble and mouseout does. This means that mouseleave is fired when the pointer has exited the element and all of its descendants, whereas mouseout is fired when the pointer leaves the element or leaves one of the element's descendants (even if the pointer is still within the element).

 

https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event

 

See the Pen bGRyPXb by GreenSock (@GreenSock) on CodePen

 

 

  • Like 2
Link to comment
Share on other sites

36 minutes ago, OSUblake said:

 

Just click the fork button in the bottom right.

 

image.png

 

And I would use mouseleave instead of mouseout for the event. There is a difference.

 

 

https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event

 

 

See the Pen

See the Pen bGRyPXb by GreenSock (@GreenSock) on CodePen

by GreenSock (@GreenSock) on CodePen

 

 

 

Okay everything works now :) thank you very much for everything, you were very helpful.

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