DEV Community

Cover image for Recreating a GIF with CSS: Earth Day Edition
Bhalli B
Bhalli B

Posted on

Recreating a GIF with CSS: Earth Day Edition

This is a submission for Frontend Challenge v24.04.17, Glam Up My Markup: Earth Day Celebration Landing Page

Mainly I am not a participant of this Challenge, just did it for fun. The Credit for initial effort goes to @arndom

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 haven't done any "complex" animations with CSS alone, so this was the right time to try.

Image description

What I Built

Keeping in mind The above GIF, I created an animation of EARTH as in the GIF You can see the demo below

Demo

It's doesn't loop, so click rerun↗️ to replay

Journey

Upon reading the announcement and seeing the GIF, I got the idea of an animation like this. I had to attempt a CSS recreation. It was unique, outside my comfort zone, and something worth doing and sharing.

Working on it was both challenging and inspiring.
Happy coding :)

Top comments (9)

Collapse
 
schemetastic profile image
Schemetastic (Rodrigo)

Hey! Very good entry!

If you want to improve it, maybe you could add a very slight 3D rotation to the eyes and mouth when they look in different directions... you could also animate a little the leafs of the tree, you could use transform-origin to choose the anchor point of each leaf and rotate them accordingly... also, some elements have a wobbly-like effect, you could use skew to do that.

Hope this helps.

Collapse
 
bhallibhai profile image
Bhalli B

Please provide feedback on my performance, or kindly offer any suggestions for potential improvements. Your input is greatly valued and appreciated.

Collapse
 
arndom profile image
Info Comment hidden by post author - thread only accessible via permalink
Nabil Alamin • Edited

@bhallibhai

This is heavily influenced by the original here: dev.to/arndom/recreating-a-gif-wit...

There is no problem drawing inspiration, but using the same article title, copying the article content, and even the codepen without any form of attribution is wrong!

Collapse
 
bhallibhai profile image
Bhalli B • Edited

Already mentioned above I guess, That I Recreated, All the created goes to you, Man :)
I update this for fun, If you still have problem I can delete this post and send the updated code to you @arndom
I hardly got time to do stuff like this. I am a busy person, Usually Don't have enough time.

Thread Thread
 
arndom profile image
Nabil Alamin

It's all good now 🤝

Collapse
 
arndom profile image
Nabil Alamin

Glad to see the attribution 🤝.

Generally, it's alright to build on top of open-source but always give references, so as not to make the original author/creator feel cheated.

Thread Thread
 
bhallibhai profile image
Bhalli B

I think you overthought, But it's cool Man.

Thread Thread
 
arndom profile image
Nabil Alamin

Yh it's all good, but it's not overthinking if 99% of your work is copied and phrased as someone's else, even if it is just for fun. It might not have been your intention but it's how it initially appeared.

Collapse
 
hurerabhalli profile image
Hurera Bhalli • Edited

Looking good and cool enough,

Some comments have been hidden by the post's author - find out more