Andy1708 Posted February 15, 2021 Share Posted February 15, 2021 Hello, Can you tell ne why, when we mouseleave the dots, they don't move back to their initial position ? Is ther a way to acheive this ? Loook at the Dots component. Thanks Andy See the Pen 36648feb66346e6e7be5d877acdae6ea by YVNKAD (@YVNKAD) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 15, 2021 Share Posted February 15, 2021 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 More sharing options...
Rodrigo Posted February 15, 2021 Share Posted February 15, 2021 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!!! 3 Link to comment Share on other sites More sharing options...
Andy1708 Posted February 15, 2021 Author Share Posted February 15, 2021 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 More sharing options...
ZachSaucier Posted February 16, 2021 Share Posted February 16, 2021 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 More sharing options...
Rodrigo Posted February 16, 2021 Share Posted February 16, 2021 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!!! 2 Link to comment Share on other sites More sharing options...
mikel Posted February 16, 2021 Share Posted February 16, 2021 Just another option to calculate and use the x/y position See the Pen GRNmKXK by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 3 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