Loading video...

Video Failed to Load

Go Home

Trying View Transitions in Next.js using 's next-view-transitions library. Love how straight-forward this was.

addyosmani's profile picture

Addy Osmani

391,970 subscribers

33,113 views • 1 year ago •via X (Twitter)

Science & TechnologyEducationArts
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

I created this gooey text effect animation using View Transitions and the blur + contrast method
0:13

I created this gooey text effect animation using View Transitions and the blur + contrast method

Kevin Grajeda

172,261 views • 1 year ago

A first look at View Transitions working in Safari!
0:15

A first look at View Transitions working in Safari!

Addy Osmani

105,959 views • 2 years ago

View Transitions are coming to WP Admin in WordPress 7.0!
0:14

View Transitions are coming to WP Admin in WordPress 7.0!

Felix Arntz

14,407 views • 6 months ago

Happy "View Transitions Level 1 support in all major browsers" Day! 🎉 With Firefox 144 now stable, everyone gets beautiful transitions with Astro ClientRouter
0:13

Happy "View Transitions Level 1 support in all major browsers" Day! 🎉 With Firefox 144 now stable, everyone gets beautiful transitions with Astro ClientRouter

Astro

201,430 views • 9 months ago

New Astro + View Transitions demo ✨ This time using React Three Fiber to render an animated 3D model that persists across page-navigations.
0:18

New Astro + View Transitions demo ✨ This time using React Three Fiber to render an animated 3D model that persists across page-navigations.

Maxi Ferreira

125,776 views • 2 years ago

Chrome 147 is officially rolling out to users everywhere → This release includes element-scoped view transitions, empowering you to run concurrent transitions on separate HTML elements.
0:13

Chrome 147 is officially rolling out to users everywhere → This release includes element-scoped view transitions, empowering you to run concurrent transitions on separate HTML elements.

Chrome for Developers

73,272 views • 3 months ago

After nearly 3 years of attempts, finally landed cross-document (MPA) view transitions in ✨
0:13

After nearly 3 years of attempts, finally landed cross-document (MPA) view transitions in ✨

Joe Bell

53,396 views • 2 months ago

Did you know you can use view transitions with iframes? This is all you need: <iframe transition:name={exampleName}>
0:14

Did you know you can use view transitions with iframes? This is all you need: <iframe transition:name={exampleName}>

Astro

19,543 views • 1 year ago

shared element transitions [document] exploring layers and interactive dismissal patterns in this new view controller transition love giving the user small hints when they are mid-gesture - in this case "I'll dismiss if you let go!"
0:05

shared element transitions [document] exploring layers and interactive dismissal patterns in this new view controller transition love giving the user small hints when they are mid-gesture - in this case "I'll dismiss if you let go!"

Kristian Wagner

16,422 views • 1 year ago

Excited to share my latest project glimm is a React and Next.js library for delightful shader-driven page transitions. It animates a WebGL band across the screen during route changes or any state change if selected. The new view appears underneath as the band moves. It is GPU-accelerated, under 10 KB, and remains idle until triggered.
0:18

Excited to share my latest project glimm is a React and Next.js library for delightful shader-driven page transitions. It animates a WebGL band across the screen during route changes or any state change if selected. The new view appears underneath as the band moves. It is GPU-accelerated, under 10 KB, and remains idle until triggered.

Noman

26,710 views • 1 month ago

This is how the new spectator camera transitions looks like in-game.
0:16

This is how the new spectator camera transitions looks like in-game.

Thour

782,866 views • 9 months ago

After a long time, I've created a new pen to try out the View Transitions feature and this is really cool! 🚀🚀 CodePen.IO
0:10

After a long time, I've created a new pen to try out the View Transitions feature and this is really cool! 🚀🚀 CodePen.IO

Aysenur

83,819 views • 2 years ago

A year ago view transitions were tricky to implement right Today, I used this skill + $2 in credits to near one-shot this 🤯 Do I ship it to skills sh?
0:13

A year ago view transitions were tricky to implement right Today, I used this skill + $2 in credits to near one-shot this 🤯 Do I ship it to skills sh?

Andrew Qu

57,688 views • 3 months ago

The View Transitions API for Single-Page Apps (SPAs) is in Chrome 111 (the new stable)! 😍 Check out Jake Archibald's fantastic guide and this awesome demo from Maxi Ferreira
0:14

The View Transitions API for Single-Page Apps (SPAs) is in Chrome 111 (the new stable)! 😍 Check out Jake Archibald's fantastic guide and this awesome demo from Maxi Ferreira

Addy Osmani

104,222 views • 3 years ago

Following on from last week's GPT 5.5 experiments... Did more experimenting with HTML-in-Canvas to create more interesting page transitions Using our favourite animation library GSAP + the PixiJS Skills Very impressed with how well GPT 5.5 can create WebGL/WebGPU shaders
0:10

Following on from last week's GPT 5.5 experiments... Did more experimenting with HTML-in-Canvas to create more interesting page transitions Using our favourite animation library GSAP + the PixiJS Skills Very impressed with how well GPT 5.5 can create WebGL/WebGPU shaders

PixiJS

38,927 views • 2 months ago

Answer in comments ⤵️ using only emoji or gif how this view makes you feel
0:13

Answer in comments ⤵️ using only emoji or gif how this view makes you feel

𝐒𝐨𝐟𝐢𝐚

34,676 views • 2 years ago

LOOK. This is just a regular ol' website. No JavaScript whatsoever. Navigation pages with clicks <a> links to other HTML pages. The most basic website in the world. Yet, with a few lines of code to activate View Transitions, KAPOW.
0:14

LOOK. This is just a regular ol' website. No JavaScript whatsoever. Navigation pages with clicks <a> links to other HTML pages. The most basic website in the world. Yet, with a few lines of code to activate View Transitions, KAPOW.

Chris Coyier

830,480 views • 3 years ago