Can I Create This Complex 3D Countdown Timer Animation?

Animations in CSS are hard enough to implement in just two dimensions, but when you have to deal with three dimensions it gets much harder. In this video I will be attempting to create a full 3D flip countdown timer animation.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:36 - CSS Basics
11:56 - CSS Animation
20:29 - JavaScript Testing
26:40 - Swapping Away From Pseudo Elements
35:25 - Finish HTML
40:15 - JavaScript Timer

#CSS #WDS #JavaScript

[JaredFelsman]

It really got to me that you never corrected the mistake made at 26:00 haha. I was waiting for you to spot it. I looked in the source code and it is still there!

[jakeave]

"all we gotta do... which I don't think will be that hard" 33:47 I've said that so many times when I'm in the first week of what becomes a month long ordeal 😆Great job with the work flow and the result looks stellar!

[JeremyBolanos]

I love watching your process. Makes me feel more secure about applying my 25 years of nonsense to current problems.

These kinds of videos are both educational and entertaining. The only thing that I'm missing is a bit more explanation of the thought process behind positioning the number text (half-number) within the element. I was surprised how flex-end would move the text content within the container.

[delnarlt]

Great video. Alot of people don't want to show their mistakes, but we learn more from mistakes than from success. I'm actually going to use what you did here in a project of mine so thank you for the info.

[SanthoshBalajiRamesh]

Hey man, its just like you read my mind. I was just thinking about this project few days back.
great work. keep it up.👍

[keremardicli]

I love to see how even Kyle get stuck when it comes to css :D

[ryan-heath]

css: I’m not going to do that
webdev guy: mmm mmm mmm mmm
css: okay, okay, that will work

[nilinbf]

Great video, best frontend channel ever!

[ofeenee]

More like this please. Amazing video. Thank you very much.

[sevenarts]

Kinda new to JS and React and these projects help me tons

[gopalloharnew]

Recently I tried to create a Carousel UI and 3 day later You uploaded the video "Can I Create Netflix's Video Carousel UI"
and Yesterday I was trying to create a flipping clock and You uploaded this video !
are you spying on me😆😆😆

[ronny]

Wow, just wow. Simply amazing to watch while you solved this task. I come back for more :-). Thank you!

[timdean]

Really like this style of video, seeing the bug solving

[keithh]

CSS animations rock. Awesome video once again!

[IceMetalPunk]

Did you just fix an error by putting a semicolon at the start of the next line instead of at the end of the correct line? I... I understand that works, but... it hurts my soul 😅 This is why semicolons are worth getting in the habit of using, folks! 😁

[asdffacil]

This channel is huge! just found your channel by specificity 2019

[kenchiie]

I like how confident he is naming the animation to "flip-up" and then realized its actually irrelevant. 🤣 Anyway, I enjoyed this video. 😁

[Ethan_]

You are really really on fire Vanilla Js King 😍

[mvrius]

26:02 that top shouldn't be topHalf? at top.textContent = startNumber? cuz you changed the name of the variable but you changed it just in the event listener
even if the things work properly, I'm just curious
22:32 why's that semi-colon there? is this some syntax?