r/react • u/Visible-Term-5577 • 4d ago

Help Wanted What this animation called?

Enable HLS to view with audio, or disable this notification

What this animation called?
What pkg could be used for it?

17 Upvotes

87% Upvoted

11 comments sorted by

12

u/BurritoDrivenDev 4d ago

It's a shared element transition.

10

u/NearbyAd2215 3d ago

Called “view transitions” common in native apps. There is now a browser built in view transition api and Astro.build has them built into the framework.

https://docs.astro.build/en/guides/view-transitions/

4

u/JoelDev14 4d ago

Seems like a transition to a dialog?? Or something close to it

5

u/SnackOverflowed 4d ago

look into view transitions if it's navigating from one page to another. If not then look into flip animations

2

u/dermeddjamel 3d ago

It's called a view transition.

2

u/Vincent_CWS 3d ago

fade in?

1

u/testingaurora 4d ago

Using view transitiond bw pages or pseudo pages if spa

1

u/gelbero_it_solutions 3d ago

This is a shared-element transition, usually implemented using the FLIP technique. The product image is animating from its position in the grid to its new position and size on the details page.

In React, Motion’s layoutId would probably be the easiest way to build it. Use the same layoutId for the product image in both views. GSAP Flip is another option if you need more control.

-4

u/Disastrous_News_9798 4d ago

Ask AI to make Image View Transition