Recreating a GIF with CSS: Earth Day Edition
#frontendchallenge#devchallenge#css#webdev
Nabil Alamin

Nabil Alamin @arndom

About: another random dev

Location:
Nigeria
Joined:
Dec 14, 2020

Recreating a GIF with CSS: Earth Day Edition

Publish Date: Apr 20 '24
20 8

This is a submission for Frontend Challenge v24.04.17, CSS Art: Earth Day.

Inspiration

When I saw the challenge I wanted to participate to improve my skills, and when I saw the GIF in the announcement post I knew what to attempt. I had never done any "complex" animations with CSS alone so this was the right time to try.

earth-day-gif

Demo

sadly, it doesn't loop so click rerun↗️ to replay

Journey

Upon reading the announcement and seeing the GIF, I knew I had to attempt a CSS recreation. It was unique, outside my comfort zone and something worth doing and sharing.

I started by watching a video about CSS animations from Kevin Powell on YT as I had no idea where to start from. After this, I created a codepen account and started figuring things out.

I broke the GIF into chunks, starting from the clouds, then the earth, its face, its map background and its tree, while sequentially animating these elements along the way.

Time flew by as I initially struggled but eventually got the hang of things. At the end of it all, the animation was done and though it wasn't perfect, It looked great and I was pleased with it.

Used Resources

bye-bye

Comments 8 total

  • Sean Davis
    Sean DavisApr 21, 2024

    I think this is an awesome submission to the challenge! You may have even inspired me to give it a try! 🤙

  • Ranjan Dailata
    Ranjan DailataApr 25, 2024

    Man, great animation. That tree which came up all the way from the bottom was like a rocket launcher ;)

  • mfalconi
    mfalconiApr 27, 2024

    Dude the way you did the cloud shape is actually ingenious nice work!

  • Bhalli B
    Bhalli BApr 29, 2024

    Nice work, The way you did it, It's Amazing

  • Philip Warkentien II
    Philip Warkentien IIApr 30, 2024

    Looks great! I had the same idea, but missed the deadline.
    About making the animation run without hitting rerun, here are two options:
    1 - (easier) make it trigger on container :hover, and add a ":hover me" call to action.
    - set animation-play-state: paused; after each animation definition.
    - add:

    body:hover * { animation-play-state: running !important; }
    Enter fullscreen mode Exit fullscreen mode

    2 - (loop) make it loop! Add animation-iteration-count: infinite;
    - make multiple animations have the same duration. Might have to change keyframes interval. E.g.: Making a 2s animation last 5s: change 0% to 100% for 0% to 40%, 100% (40 and 100 duplicates final state). 40% = 2s/5s * 100%

Add comment