Simple SVG logo preloader animation with CSS!

Let's explore CSS keyframe animations by animating my SVG logo intro loader as well as a repeating background scroller. We'll learn about SVG properties like defs and mask as well as how to use the @keyframe keyword in CSS to animate different properties like SVG attributes and CSS properties.
// CLONE IT
👯‍♀️ try.webflow.com/cloneable-is-...
// FREE resources
✂️ Code Snippet Library: code-snippets-sign-up.webflow...
🤝 CSS Nobody Told You About: www.webbae.net/css-nobody-tol...
🚗 Roadmap to learn Webflow: www.webbae.net/roadmap-to-lea...
🧱 Build faster with my component library: webbae.net/components
// Premium content
🤝 Patreon: / webbae
🕸️ Advanced Webflow Course (201): www.webbae.net/product/webflo...
// GSAP Discounts
🎢 Get 10% GSAP: WEBBAE10
♣️ Creative Coding Club (My favorite GSAP lessons): www.creativecodingclub.com/bu...
// Connect
🙋‍♀️ Join the Discord: / discord
🐥 Follow Me! / webisbae

[@apurimedia]

Now this is cool - I'm inspired to utilize a similar idea on a project I'm currently working on! 🙌🏼 thanks!

[@webbae]

glad it could help!

[@heyderekj]

"Pepper Pattern" at 2x speed is great

[@webbae]

my initial recording I misspelled it to "papper pattern" 😆 but had to throw out that recording because of course I forgot to include the mic in my inputs.

[@pablocortes682]

Awesome video as always WebBae, very useful, thank you so much. Just a minor thing, the cloneable version does not include the forwards parameter on the loader animation. Just wanted to let you know that.

[@webbae]

thank you Pablo. Weird how sometimes webflow doesn't publish my updates to the cloneable. I unpublished and republished so hopefully it's updated on your end!

[@xatomdev]

Amazing 🎉

[@webbae]

Thanks Virat!

[@heatherliu6856]

Where da intro tag 🤨🎶

[@webbae]

SHOOT
need to add to faq.