Powerful CSS-only Page Transitions with View Transitions

Learn how to create dynamic and eye-catching page transition animations in Webflow using only CSS and the View Transitions API. We'll take a look at @view-transition css rule, view-transition-name CSS property, and how to make it all work with the Webflow CMS. I used to reach for complex Javascript libraries like Barba.js and GSAP for this but now we can do it easily with a few lines of CSS.
// CLONE IT
👯‍♀️ try.webflow.co...
// FREE resources
✂️ Code Snippet Library: code-snippets-...
🤝 CSS Nobody Told You About: www.webbae.net...
🚗 Roadmap to learn Webflow: www.webbae.net...
🧱 Build faster with my component library: webbae.net/com...
// Premium content
🤝 Patreon: / webbae
🕸️ Advanced Webflow Course (201): www.webbae.net...
// GSAP Discounts
🎢 Get 10% GSAP: WEBBAE10
♣️ Creative Coding Club (My favorite GSAP lessons): www.creativeco...
// Connect
🙋‍♀️ Join the Discord: / discord
🐥 Follow Me! / webisbae

[@johnpeterson8493]

Nice. Thank you

[@dannnnnno]

Great video man

[@webbae]

Appreciate it

[@fletermarius58]

I have no ideea why I did not subscribe earlier. Thanks for the value

[@webbae]

Welcome aboard! 🫡

[@kudz]

I love this.
Let's all just pretend Safari doesn't exist😇

[@tinny77]

it's supported since september 2024

[@frontend-css-simplified]

Awesome Idea man. 👏
I’ve got a tip for you. If you’re use Webflow native Custom Element for the image, heading & paragraph, then you can take advantage of Custom Attributes to easily add inline styles. 😉

[@webbae]

tried this but in some instances we don't get access to the CMS property we need.
for example. Custom Element with img tag doesn't give access to the image to set src. :(
also, to my knowledge we need to express unique id's for each element, (even if they have a different tag, though I didn't verify this). using the embed, we can add a suffix string if we have multiple elements transitions using view-transition-name=slug.

[@ollieolllie]

Is it possible to control the duration and easing of the animations of the image and text?

[@surendarr2177]

Awesome 😮 bae

[@webbae]

Thanks Surendar 🤗

[@nier3434]

Material io has fantastic ux documentation for this type of feature

[@webbae]

I always learn a ton from their docs! I will have a look at what they say about cards!

[@webbae]

anything I missed btw?

[@nier3434]

​@webbae It's all up to us, but in their docs they have a quick fade of content in between full size and card size. "Fade content out before fading new content in to maintain a clean design"
Also, can you recreate or get close to recreating their carousel in webflow? It has a grow/shrink with size hierarchy and parallax

[@webbae]

@@nier3434 this one? m3.material.io/components/carousel/overview

[@nier3434]

@@webbae yes 😁

[@welling1]

This is all good locally, but aren't there major rendering issues, epecially with slower bandwidth users?

[@webbae]

There's more calculation I'm sure but it's most likely going to be more performant than any JS solution. These kinds of transitions are all over the place in mobile apps too. I think it's fine :).

[@heatherliu6856]

This video sold me on Pygmy goats

[@webbae]

you are sold? you are buying a goat?

[@DSOlaLG]

I understand why I haven't seen this feature, it's not supported by all browsers

[@webbae]

yea just came to Safari but no word from firefox :(. Nice that it's a progressive enhancement and fallback behavior works for normal navigation.