Submitted almost 3 years ago

Site Launch Countdown with Animations using Green Sock

Brian Farmer• 210

@brianlfarmerllc

Preview site View code

This is a solution for...

Launch countdown timer

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

I'm not great with animations and this was a challenge for me. I found the Green Sock animation Library very helpful and would suggest others struggling with this challenge check it out https://greensock.com/.

A couple small thing that still bug me are my apostrophe will not tilt. I tried wrapping it in a span and using trasform: rotate(30deg) but that did nothing.

Also in the design provided it looks like the card is folded forward slightly and I cant seem to replicate that look. Any suggestions? Thanks in advance.

Community feedback

tediko• 6,580

@tediko

Posted almost 3 years ago

Hello, Brian Farmer! 👋 Well done on this challenge! Here's a few things I'd suggest you to take a look at:

Since you are using perspective to achieve "3d effect" on your card flipping u can't set overflow: hidden to .card-element. You did this to cut this border circles but find another way to do this, because this "flipping" effect is better with perspective. Keep up the good work! 💪

Brian Farmer• 210

@brianlfarmerllc

Posted almost 3 years ago

Hey I appreciate you taking the time to look over the css. I'll check out what you mentioned.

Brian Farmer• 210

@brianlfarmerllc

Posted almost 3 years ago

Took your advise and wow much better. Didn't realize how much I changed the behavior when I added the overflow hidden to my .time-element class. Again much appreciated!

Patrick• 14,325

@palgramming

Posted almost 3 years ago

You nailed it, this seems really spot on 🌟🌟🌟🌟🌟. The background change on the top of the number and then the quick change really simulates the flip really good

Brian Farmer• 210

@brianlfarmerllc

Posted almost 3 years ago

Thanks I wish I could credit myself with coming up with it 100% but I had to combine a bunch from other code pens. I was happy with the end result though. Appreciate the comment!

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord