Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Andy1708

Get initial position on mouseleave React + Gsap

Recommended Posts

Hey Andy.

 

First off, try not to animate top and left (or other non-performant properties). Instead stick to properties that are more performant to animate like x and y. 

 

2 hours ago, Andy1708 said:

Can you tell ne why, when we mouseleave the dots, they don't move back to their initial position ?

You don't have any code to tell it to animate back to their original positions...

 

To do that you'd need to save the original positions and then animate to those values for each dot inside of the mouse leave function. 

 

Perhaps if you explained your end goal we could better explain how to set up that sort of thing.

Link to comment
Share on other sites

Hi,

 

I don't have time to create a sample right now but this is a fun idea, good job!!!

 

One approach I'd use would be to make every dot a single component and store it's initial position using useRef(), since that hook stores data in the current property that doesn't change during re-renders.

 

The second approach is to animate X and Y, as Zach already suggested, and you don't need to reverse the animation, simply create an onComplete callback and animate both values to zero. This seems to do what you're after:

const tlMouseEnter = (t) => {
  gsap.to(elem, {
    x: r(50),
    y: r(40),
    duration: 2,
    ease: 'power2',
    onComplete() {
      gsap.to(elem, {
        x: 0,
        y: 0,
        duration: 2,
        ease: 'power2'
      })
    }
  })
}

Happy Tweening!!!

  • Like 3
Link to comment
Share on other sites

Thanks @Rodrigo and @ZachSaucier,

i have modified the codepen

 

first i store left and top in a data array.

Then i map the data in a SingleDot component

set a mouseEnterAnimation and an itemRef

then deal with x and y value in a useCallback fonction

and reset value onComplete

is it the best way ?

 

@Rodrigo if you have some time explain me how you can acheive this with UseRef... let me know

 

 

Thanks very much indeed

 

Andy !

 

Link to comment
Share on other sites

When creating new versions of demos for these forums, please use the "fork" button so that context is not lost for future readers of the thread.

 

Your approach is fine. You might want to add overwriting so that new tweens kill off conflicting other ones: overwrite: 'auto'. You could also make use of GSAP's built in random functionality instead of adding your own which just (slightly) bloats your code: x: 'random(["-=50", "+=50"])'.

Link to comment
Share on other sites

14 hours ago, Andy1708 said:

first i store left and top in a data array.

Then i map the data in a SingleDot component

set a mouseEnterAnimation and an itemRef

then deal with x and y value in a useCallback fonction

and reset value onComplete

is it the best way ?

 

@Rodrigo if you have some time explain me how you can acheive this with UseRef... let me know

Hi,

 

There are a few things you need to consider. Will the state and/or props of each SingleDot component change at any point during it's lifecycle? If the state changes, then yeah, store all initial data using useRef and create the callback using useCallback. If the state doesn't change just use the React.memo() in order to prevent unnecessary re-renders. Also, do you really need to make every dot a component? Give that a good thought and use the magic word a guy I worked with some time ago asked all the time: Why? Every architectural decision in your app should be followed by asking that question a few times, until you reach a point where is clear that is the best option or you saw a better way to do it. If you don't actually need every dot to be a component, perhaps create a Dots component that has all the dots in it and handles all that data.

 

Maybe all the process described above might seem extreme for something small or not too complex, but it's highly recommended to use best practices and try to optimize everything, regardless of size and performance impact. In small apps performance could be unnoticeable most of the times but using that approach can be useful when landing a job working on an ongoing project and/or working with a large development group where those things are required. Always use what I call the Forrest Gump axiom: "Life is like a box of chocolates, you never know what you're going to get". Always work thinking that at some point you'll need to make all those decisions, read about them and experiment, so when the time comes to actually make that decision you can give a solid answer every time the project manager asks: "Why?"

 

Happy Tweening!!!

  • Like 2
Link to comment
Share on other sites

 

Just another option to calculate and use the x/y position

 

See the Pen GRNmKXK by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

  • Like 3
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.
×