正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

Every animation in this video was done with document.startViewTransition() and view-transition-name ONLY

Scott Tolinski - Syntax.fm

62,144 subscribers

21,365 次观看 • 1 年前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

7 条评论

jhey ▲🐻🎈 的头像

jhey ▲🐻🎈1 年前

yeah - playing cards was one of the first View Transitions demos I messed about with (before it got the rename) lot of fun - in earlier versions it could somewhat handle 3D transforms too

Manu 的头像

Manu1 年前

This API is so underrated. I have used it to animate page transitions and it was extremely easy to make it work. I think most people overlook this as animations used to be more complicated to set up, and we are still blocked by that trauma.

Scott Tolinski - Syntax.fm 的头像

Scott Tolinski - Syntax.fm1 年前

@manuaveragedev So true.

Mateusz Derks 的头像

Mateusz Derks1 年前

Nice! I used view transitions to animate card movement as well here: The only thing that stopped me for more than a minute was addressing a few issues with z-index, other than that it was a breeze.

Christian Genco 的头像

Christian Genco1 年前

oh hey `startViewTransition` works on everything except Firefox—I gotta start using this.

Sean Wilson 的头像

Sean Wilson1 年前

I think browser support is the main blocker? Looks like View Transitions is supported in Chrome and the latest Safari? Not finding anything about when it's coming to Firefox. Found a polyfill for it but it's 300K.

Beto Melean 的头像

Beto Melean1 年前

Could this work with Rive assets?

相关视频

the transition between 2d and 3d animation was done so well

the transition between 2d and 3d animation was done so well

Marko

291,963 次观看 • 11 个月前

Future CSS && UI Tip! ⚡️ You could use View Transitions to create those word carousel-type effects 😍 span:nth-of-type(2) { view-transition-name: swap; } ::view-transition-old(swap) { animation-name: slide-down; } ::view-transition-new(swap) { animation-name: slide-up; } How To 1. Create a paragraph split into spans 2. Set an interval in JavaScript that swaps out the accent word 3. Set a view-transition-name on the accent word and the last span Then you've got a responsive word carousel with View Transitions 🤙 Words and inspiration from work louder®'s home page. Had to see if this API could do it and it ended up raising a bug for the web platform! 💪 CodePen.IO link below! 👇

Future CSS && UI Tip! ⚡️ You could use View Transitions to create those word carousel-type effects 😍 span:nth-of-type(2) { view-transition-name: swap; } ::view-transition-old(swap) { animation-name: slide-down; } ::view-transition-new(swap) { animation-name: slide-up; } How To 1. Create a paragraph split into spans 2. Set an interval in JavaScript that swaps out the accent word 3. Set a view-transition-name on the accent word and the last span Then you've got a responsive word carousel with View Transitions 🤙 Words and inspiration from work louder®'s home page. Had to see if this API could do it and it ended up raising a bug for the web platform! 💪 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

230,157 次观看 • 2 年前

design by @/ mzg_art all art was done in CSP and all animation was done in Afer Effects. its my first real go at doing a full animation of a character like this only using AE might do it again.

Sensitive content

design by @/ mzg_art all art was done in CSP and all animation was done in Afer Effects. its my first real go at doing a full animation of a character like this only using AE might do it again.

🔞Jaxx Open comms

38,432 次观看 • 1 年前

This old transition animation between songs was pretty cool

This old transition animation between songs was pretty cool

Dazz 💫

97,140 次观看 • 5 个月前

This entire bit works because of the animation. This was the only cartoon of the whole show where a lot of the animation was done in-house, and Jim Soper's shots of Elmer killed me on first viewing.

This entire bit works because of the animation. This was the only cartoon of the whole show where a lot of the animation was done in-house, and Jim Soper's shots of Elmer killed me on first viewing.

Miguel

63,776 次观看 • 3 年前

I haven't done a dub like this in ages, but the power of the #deltarune and melts 's amazing animation called to me. This scene was perfection and I only hope I could do the animation justice ;;

I haven't done a dub like this in ages, but the power of the #deltarune and melts 's amazing animation called to me. This scene was perfection and I only hope I could do the animation justice ;;

Faux- VA and Vtuber 🌈🦊

73,647 次观看 • 1 年前

We’re soo fucked 😭 I recreated this launch animation with replit AI in only 8 prompts Creatives are done

We’re soo fucked 😭 I recreated this launch animation with replit AI in only 8 prompts Creatives are done

Ur Designwhiz

140,254 次观看 • 5 个月前

“Ain’t Even Done with the Night” is a song written by this Hoosier native and was released in 1980. 👉🏻 Can you name this artist?

“Ain’t Even Done with the Night” is a song written by this Hoosier native and was released in 1980. 👉🏻 Can you name this artist?

OneOutOfFour

56,827 次观看 • 8 个月前

the second Mark got Helly’s name wrong this discussion was DONE (and Adam Scott’s Emmy was in the bag) #severance

the second Mark got Helly’s name wrong this discussion was DONE (and Adam Scott’s Emmy was in the bag) #severance

Sarah ✨

288,341 次观看 • 1 年前

This is the BTS from the calligraphy exhibition animation I made with a few months ago in Hong Kong. Most of it was done in Cavalry , and a little bit in After Effects. And yes… I’m still that weirdo who keyframes every single shot by hand.

This is the BTS from the calligraphy exhibition animation I made with a few months ago in Hong Kong. Most of it was done in Cavalry , and a little bit in After Effects. And yes… I’m still that weirdo who keyframes every single shot by hand.

fafa

45,441 次观看 • 9 个月前

Look at this Honda Sherni and understand 🤡😣 Her name is Nandini Rao, she used to work in a company, that's when she met Aryan Khan, initially Aryan Khan told his name as Aryan only, after a few days he told that I am Aryan Khan This girl fell in love with Abdul and ran away with him. After a few days, this girl was found at Abdul's sister Zoya Khan's house. You can see in the video in what condition she was found. Download this video and share it with every Hindu girl whose Abdul is different from others. 🤡

Look at this Honda Sherni and understand 🤡😣 Her name is Nandini Rao, she used to work in a company, that's when she met Aryan Khan, initially Aryan Khan told his name as Aryan only, after a few days he told that I am Aryan Khan This girl fell in love with Abdul and ran away with him. After a few days, this girl was found at Abdul's sister Zoya Khan's house. You can see in the video in what condition she was found. Download this video and share it with every Hindu girl whose Abdul is different from others. 🤡

Bharatrastrasena

388,174 次观看 • 10 个月前

This guy made a video trolling with the name of a made up crop and not only did Occupy Democrats post the video thinking it was real but CNN asked for an interview. (Video in comments)

This guy made a video trolling with the name of a made up crop and not only did Occupy Democrats post the video thinking it was real but CNN asked for an interview. (Video in comments)

Washingtons ghost

914,193 次观看 • 11 个月前

This animation from Disney's ‘Flowers and Trees’ won the first Oscar for a cartoon in 1932, also the first to use 3 reel filming. Every single movement was done by hand.

This animation from Disney's ‘Flowers and Trees’ won the first Oscar for a cartoon in 1932, also the first to use 3 reel filming. Every single movement was done by hand.

Historic Vids

3,594,956 次观看 • 2 年前

【ｍｉｎｄｗａｖｅ】 It took me a whole month to make this, every drawing, animation, 3D model, texture, editing and music was done by myself with a lot of passion and effort because I love this game <3 #mwfanartcontest

【ｍｉｎｄｗａｖｅ】 It took me a whole month to make this, every drawing, animation, 3D model, texture, editing and music was done by myself with a lot of passion and effort because I love this game <3 #mwfanartcontest

☆JustDemianAgain ☆

41,740 次观看 • 1 年前

This Idea was already done in 2001😌 Movie Name - #Kushi 👍🏻 #PawanKalyan

This Idea was already done in 2001😌 Movie Name - #Kushi 👍🏻 #PawanKalyan

𝗬𝗔𝗦𝗛𝗛𝗛ᵁᴮˢ⚡

50,766 次观看 • 6 个月前

Scenes from Mountain View High School in the 1980s. This was Mountain View in 1988. Every kid you remember from high school is in this video. They were always there. Still there now, and somehow they'll still be there forty years from today.

Scenes from Mountain View High School in the 1980s. This was Mountain View in 1988. Every kid you remember from high school is in this video. They were always there. Still there now, and somehow they'll still be there forty years from today.

RetroBayArea

29,945 次观看 • 3 个月前

apparently coma performance was the only stage done in one take, with 16 dancers, and no pre-recording. this was live!! choi yeonjun you’re the coolest omg?!?!

apparently coma performance was the only stage done in one take, with 16 dancers, and no pre-recording. this was live!! choi yeonjun you’re the coolest omg?!?!

‎ . ݁⋆ lishie 🍦 ݁˖ . ݁

148,649 次观看 • 9 个月前