Loading video...

Video Failed to Load

Go Home

enter/exit page animations in Next.js

asidorenko_'s profile picture

Alex Sidorenko

35,057 subscribers

61,956 views • 1 year ago •via X (Twitter)

ArtsScience & TechnologyEducation
LIVE

Anya Rossi• Live Now

Private livecam show

11 Comments

Nithur's profile picture
Nithur1 year ago

cool one! no need for 'use client' directive?

Alex Sidorenko's profile picture
Alex Sidorenko1 year ago

Nope, no client-side JS is involved

Sakshham Bhagat's profile picture
Sakshham Bhagat1 year ago

have to try this. thanks for posting

Andre Barbosa's profile picture
Andre Barbosa1 year ago

All version ?

Alex Sidorenko's profile picture
Alex Sidorenko1 year ago

15.2+

Iramazan's profile picture
Iramazan1 year ago

thanks for sharing

Trading Developer's profile picture
Trading Developer1 year ago

Nice work!

Serhii Bedrytskyi's profile picture
Serhii Bedrytskyi1 year ago

Where you edit videos, Alex? Could you recommend something simple?

Alex Sidorenko's profile picture
Alex Sidorenko1 year ago

Screen Studio

Israel 🤖's profile picture
Israel 🤖1 year ago

This but on a background color for theme switching?

Alex Sidorenko's profile picture
Alex Sidorenko1 year ago

Whatever you want. You have complete control of the old and new screens in css.

Related Videos

New Compready website Stack: Next.js + @Figma Animations: Jitter + AE ~1 month design + dev 257% increase in conversions
0:33

New Compready website Stack: Next.js + @Figma Animations: Jitter + AE ~1 month design + dev 257% increase in conversions

Ivan Boroja

21,433 views • 7 months ago

Setting a cookie in server action automatically re-renders the current page and its layouts in Next.js
0:20

Setting a cookie in server action automatically re-renders the current page and its layouts in Next.js

Alex Sidorenko

107,205 views • 9 months ago

Metallica in Maroon & Orange! Exit Light, Enter Night ⚡️
0:30

Metallica in Maroon & Orange! Exit Light, Enter Night ⚡️

Brent Pry

82,876 views • 1 year ago

I can't stop seeing #CSS View Transitions! here I'm animating new `node.textContent`, letting the browser handle the morph while bringing in custom animations (and stagger) for stage enter and stage exit 🥲 try it
0:51

I can't stop seeing #CSS View Transitions! here I'm animating new `node.textContent`, letting the browser handle the morph while bringing in custom animations (and stagger) for stage enter and stage exit 🥲 try it

Adam Argyle

469,499 views • 3 years ago

Exit Drew Enter player/coach #WWERaw
1:38

Exit Drew Enter player/coach #WWERaw

WWE

917,429 views • 2 years ago

How to use Next.js metadata if the page is a client component
0:33

How to use Next.js metadata if the page is a client component

Alex Sidorenko

91,579 views • 1 year ago

EXIT LIGHT, ENTER NIGHT ⚡️ #ThisIsHome | #M72VirginiaTech
1:55

EXIT LIGHT, ENTER NIGHT ⚡️ #ThisIsHome | #M72VirginiaTech

Virginia Tech Football

502,012 views • 1 year ago

Next.js preserves client state on the page during navigation when cacheComponents is enabled
0:20

Next.js preserves client state on the page during navigation when cacheComponents is enabled

Alex Sidorenko

161,065 views • 8 months ago

Exit Susan Nakhumicha. Enter Deborah Barasa.
0:59

Exit Susan Nakhumicha. Enter Deborah Barasa.

Caxstone P. Kigata

82,606 views • 1 year ago

In London, they don't want to pay for transport, so they enter and exit through the disabled exit. A society like this is doomed to collapse.
0:23

In London, they don't want to pay for transport, so they enter and exit through the disabled exit. A society like this is doomed to collapse.

RadioGenoa

160,429 views • 2 months ago

Next.js Conf returns Oct 22 Live in SF. Streaming worldwide. Next.js 16. Workshops. Community. Lock in →
0:25

Next.js Conf returns Oct 22 Live in SF. Streaming worldwide. Next.js 16. Workshops. Community. Lock in →

Next.js

155,197 views • 9 months ago

In Next.js (with cacheComponents), awaiting runtime data (like "params") defines the static/dynamic boundary of your page Move awaits closer to where they're needed
0:22

In Next.js (with cacheComponents), awaiting runtime data (like "params") defines the static/dynamic boundary of your page Move awaits closer to where they're needed

Alex Sidorenko

20,803 views • 7 months ago

Introducing A tool for creating animations of your code, in HD. With support for React, Vue, Astro, Python & many more. Built with Remotion, Next.js, shadcn, PlanetScale, & more.
0:53

Introducing A tool for creating animations of your code, in HD. With support for React, Vue, Astro, Python & many more. Built with Remotion, Next.js, shadcn, PlanetScale, & more.

David Parks

105,727 views • 2 years ago

cacheComponents in Next.js (canary)
0:42

cacheComponents in Next.js (canary)

Alex Sidorenko

38,439 views • 9 months ago

Modal in Next.js 13
1:19

Modal in Next.js 13

Alex Sidorenko

111,847 views • 2 years ago

devtoolSegmentExplorer in Next.js 15.4
0:26

devtoolSegmentExplorer in Next.js 15.4

Alex Sidorenko

26,562 views • 11 months ago

Enter a Learner: Exit a Leader. 🎓🎓🎓🎓🎓
0:33

Enter a Learner: Exit a Leader. 🎓🎓🎓🎓🎓

Jalen Rose

25,679 views • 1 year ago

Two ways to handle a blocking component in Next.js: • Cache: so it can be prerendered with the rest of the page. • Stream: so the rest of the page doesn't have to wait for it.
1:09

Two ways to handle a blocking component in Next.js: • Cache: so it can be prerendered with the rest of the page. • Stream: so the rest of the page doesn't have to wait for it.

Next.js

61,963 views • 5 months ago