I was challenged to create the Prettier logo animation by one of my viewers and it looks like a really fun yet tricky CSS animation. In this video I attempt to create the load and slide animation associated with this logo and it was quite the challenge.


Materials/References:

GitHub Code: https://github.com/WebDevSimplified/prettier-css-logo-animation
CSS Transform Individual Properties Video: https://youtu.be/416MT-VmJdI


Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00 - Introduction
00:33 - Setup HTML/CSS
06:28 - First 3 Rows
17:16 - Load Animation
23:02 - Finish Logo HTML/CSS
42:10 - Swipe Animation


#Prettier #WDS #CSS