Let’s Animate with CSS (and Failing Fast!)

We are using CSS Animations to... Well, animate things. HOW HARD CAN IT BE? 🤷‍♀️

SO MANY ERRORS. ❌ ❌ ❌ Can you spot them all?

The editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.

DevTips is a weekly show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗. Exploring code together and learning programming along the way - yay!

DevTips has a sister channel called Fun Fun Function, check it out!

[szlain]

Sometimes I watch you guys do .js and it makes me feel bad about how much I still have to learn... Watching you do css makes me feel better. 😂❤️

[TraversyMedia]

Just started the video, but “Live Server” for vscode my friends 👍🏻

[DarkZoneGamingMain]

In a strange paradoxical twist sort of fashion lol you guys can learn more about Keyframes from.... wait for it.. DEVTIPS! Travis used to have some great vids on css animation series which included great examples on using @keyframes lol.

[_whittington]

Use the live-server vs code extension for automatic reloading

[krantinebhwani]

Search for 'Live Server' in the extentions search in VS Code, it's an amazing tool just right click your html code space and select 'Open With Live Server' and that page will reload whenever you save. There should also be a 'Go Live' button on the bottom right of VS Code for you to click to go live, its usually shown next to the `ln, col` status.

[Ecker]

Center a SVG, "let use CSS grid". 🤣 Then scroll right past the correct answer on CSS tricks. 👍 This was the best coding comedy ever, me and my wife rolling on the floor. – PLEASE DO MORE CSS.

[zekezekeish]

Dev Tips was the number 1 source for me to learn CSS when I was starting out, so it is *very* weird to see hosts of the show struggle with relatively simple CSS stuff :D.

The positioning is correct, but the way you guys scaled the SVG is bad from the performance point of view. As MPJ noticed the animation appeared a bit glitchy because the animation was dropping frames. I know it doesn't really matter on this use case, but to the viewers - please never use this approach in a real website or app.

In this case the proper way to scale the SVG would have been the "transform: scale();" property. The ground rule on using transition is that try to stick with transform and opacity. Using transition with those two properties is the cheapest way to achieve smooth animations.

[cannyaii]

I consider you both my teachers, and seeing you going through this just reminded me that no one has all sides covered, perseverance was key here, maybe the biggest lesson of this episode. You deserve support while up or down. Keep up the good work.

[PaulMcCannWebBuilder]

After watching you guys explain difficult-to-grasp JS concepts for many years, it's life affirming to watch you two fail miserably at something that takes me less than a minute to code. Thank you, thank you, for restoring my confidence in my own skills.
I think I'm going to raise my hourly rate because of this video.

MPJ saying "this is soooo hard' when just trying to center a logo on a page brightened my day.

Tip 1: if you first save your file as html, VS Code's Emmet shortcuts will kick in. You can then type an ! and hit tab, and it spits out the html document structure. And use the live-server extension for live reloading.

Tip 2: DON'T animate position or width/height. Use the transform methods instead. You'll get sub-pixel animation, it uses the GPU, and doesn't require the browser to repaint the page for each pixel movement.

Here’s the right way:

Tip 3: Like MPJ mentions, you can use a custom ease. Play with this tool :

Tip 4. You can animate the elements inside the SVG with CSS. Select the SVG elements just like they're HTML elements. So for example, the circle can drop in, then the text can pop in. Or even draw out the text if they're done with paths.

I’d have to invoice you for any more tips.

[sekenikola]

I'm so glad I watched this episode because it boosted my confidence and make me realize that you really can't know everything. If two of great programmers are struggling with the position in CSS than why should I know every single detail in JS, HTML, CSS or any other stuff.
Thank you guys. You dont even know how this episode helped me.

[PGDJ]

"We had people doing the HTML and CSS while I was doing the developing" shots fired.

[charliebrown]

This is a good channel because these guys show their errors, mistakes, and fuck up and how they come back from them and learn. It shows whether your still learning or actually have a web dev job that mistakes are just part of the process. I think the difference here ultimately is the fact they take a break and totally divert the focus to something else, when a noob would continue until their fingers tips bleed and eye balls blood shot to shit. Noobs hack to long, and pro's take cookie breaks.

[soroushowji]

position: fixed;
top:50%;
left:50%
transform:translate(-50%, -50%)

[revillsimon]

This video is perfect evidence for beginners that you don’t need to memorise code. No one can remember everything, even these advanced devs.

[faraonch]

As much as I hate CSS, I feel good watching these pros failing with it. This reminds me, I only know CSS coz I fought against the same bullshit over and over again until you everything by heart.

[sachin]

To center the logo -
position: absolute;
left: 50%;
top: 50%;
transform: translate (-50%, -50%);

[charb]

I admire you two as amazing developers and seeing this video, I was literally laughing because you both broke the 1 rule of programming, planning your idea and prepare via researching the topics but I really feel like this was a realistic and ideal situation that I even have been in and I was by myself struggling lol. I try to plan and prepare for my projects but sometimes time takes over and you just have to be hands to keys so to speak. I also enjoyed watching you both really try out an area of development that you both really don't work in often but still tried different ways to make it work. You didn't give up but still managed to continue. Really enjoyed this video :)

[RonLunde]

I think most of us have known exactly what we want to do in CSS and then struggled to make it work. Also, most of us have been in a hurry, especially when we want to "just get past the CSS so I can do some real code". I loved this video because you made it realistic!

[UniBreakfast]

The clicky title should be: "How to center logo on a page in just 20 minutes!"

[GifCoDigital]

You always want to use CSS transforms as they are GPU accelerated. The animations will look much smoother. So instead of animating width which is not accelerated use transform scale()