Skip to content
Submitted over 3 years ago

Site Launch Countdown with Animations using Green Sock

Brian Farmer•210
@brianlfarmerllc
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Launch countdown timer
  • HTML
  • CSS
  • JS
3intermediate

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,680
    @tedikoPosted over 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! 💪
    1
    Brian Farmer•210
    @brianlfarmerllcPosted over 3 years ago

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

    0
    Brian Farmer•210
    @brianlfarmerllcPosted over 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!

    0
  • Patrick•14,265
    @palgrammingPosted over 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

    0
    Brian Farmer•210
    @brianlfarmerllcPosted over 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!

    0

Please log in to post a comment

Log in with GitHub

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