Powerful CSS-only Page Transitions with View Transitions

Опубликовано: 29 Октябрь 2024
на канале: Web Bae

3,119

166

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
👯‍♀️ https://try.webflow.com/cloneable-is-...

// FREE resources
✂️ Code Snippet Library: https://code-snippets-sign-up.webflow...
🤝 CSS Nobody Told You About: https://www.webbae.net/css-nobody-tol...
🚗 Roadmap to learn Webflow: https://www.webbae.net/roadmap-to-lea...
🧱 Build faster with my component library: https://webbae.net/components

// Premium content
🤝 Patreon:   / webbae
🕸️ Advanced Webflow Course (201): https://www.webbae.net/product/webflo...

// GSAP Discounts
🎢 Get 10% GSAP: WEBBAE10
♣️ Creative Coding Club (My favorite GSAP lessons): https://www.creativecodingclub.com/bu...

// Connect
🙋‍♀️ Join the Discord:   / discord
🐥 Follow Me!   / webisbae