How to build floating animation?

[devoren]

Hello! I made an animation of floating hearts, it works fine. But since I use useState it blocks the JS thread. On every click I update the array and when the animation ends I remove that element. So if I press quickly it starts to lag. Do you have any idea how to handle the array? "Worklet" doesn't help, or I'm using it incorrectly. Any ideas?

Example:

{hearts.map(({ id, right }, index) => (
	<AnimatedHeart
		key={id}
		onComplete={() => {
			removeHeart(id);
		}}
	/>
))}

[MatiPl01]

Hey!

I know that this question is quite old but your case seems to be ideal for layout animations. You can add exiting layout animation to your hearts, which will automatically animate the removed heart and the layout property to animate all remaining hearts that aren't removed (e.g. layout={LinearTransiton}).

If you have more questions, don't hesitate to ask.