Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

enter/exit page animations in Next.js

asidorenko_'s profile picture

Alex Sidorenko

35,057 subscribers

61,956 Aufrufe • vor 1 Jahr •via X (Twitter)

KunstWissenschaft & TechnologieBildung
LIVE

Anya Rossi• Live Now

Private livecam show

11 Kommentare

Profilbild von Nithur
Nithurvor 1 Jahr

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

Profilbild von Alex Sidorenko
Alex Sidorenkovor 1 Jahr

Nope, no client-side JS is involved

Profilbild von Sakshham Bhagat
Sakshham Bhagatvor 1 Jahr

have to try this. thanks for posting

Profilbild von Andre Barbosa
Andre Barbosavor 1 Jahr

All version ?

Profilbild von Alex Sidorenko
Alex Sidorenkovor 1 Jahr

15.2+

Profilbild von Iramazan
Iramazanvor 1 Jahr

thanks for sharing

Profilbild von Trading Developer
Trading Developervor 1 Jahr

Nice work!

Profilbild von Serhii Bedrytskyi
Serhii Bedrytskyivor 1 Jahr

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

Profilbild von Alex Sidorenko
Alex Sidorenkovor 1 Jahr

Screen Studio

Profilbild von Israel 🤖
Israel 🤖vor 1 Jahr

This but on a background color for theme switching?

Profilbild von Alex Sidorenko
Alex Sidorenkovor 1 Jahr

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

Ähnliche 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 Aufrufe • vor 7 Monaten

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 Aufrufe • vor 9 Monaten

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

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

Brent Pry

82,876 Aufrufe • vor 1 Jahr

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,407 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 1 Jahr

Exit Drew Enter player/coach #WWERaw
1:38

Exit Drew Enter player/coach #WWERaw

WWE

917,429 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 7 Monaten

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

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

Virginia Tech Football

501,960 Aufrufe • vor 1 Jahr

Exit Susan Nakhumicha. Enter Deborah Barasa.
0:59

Exit Susan Nakhumicha. Enter Deborah Barasa.

Caxstone P. Kigata

82,606 Aufrufe • vor 1 Jahr

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,378 Aufrufe • vor 2 Monaten

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 Aufrufe • vor 9 Monaten

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 Aufrufe • vor 7 Monaten

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 Aufrufe • vor 2 Jahren

cacheComponents in Next.js (canary)
0:42

cacheComponents in Next.js (canary)

Alex Sidorenko

38,439 Aufrufe • vor 9 Monaten

New open-source dev tools marketing template dropped: - build with shadcn - content in MDX - static Next.js export (byo router) - boring elements (no fancy animations) - theme-aware images - ascii code snippets
0:47

New open-source dev tools marketing template dropped: - build with shadcn - content in MDX - static Next.js export (byo router) - boring elements (no fancy animations) - theme-aware images - ascii code snippets

Maximilian Kaske 🏓

24,620 Aufrufe • vor 7 Monaten

Introducing Auto Layout in Anime.js v4.3! - Animate display flex / grid / none, etc. - Enter / Leave animations - Animate DOM position changes - Interruptible animations - Staggered children animations - Supports any easing functions - Dead simple API Link below ⬇︎
0:36

Introducing Auto Layout in Anime.js v4.3! - Animate display flex / grid / none, etc. - Enter / Leave animations - Animate DOM position changes - Interruptible animations - Staggered children animations - Supports any easing functions - Dead simple API Link below ⬇︎

Julian Garnier

295,346 Aufrufe • vor 5 Monaten

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,805 Aufrufe • vor 4 Monaten

Modal in Next.js 13
1:19

Modal in Next.js 13

Alex Sidorenko

111,847 Aufrufe • vor 2 Jahren