Hacktoberfest: Animation.

This is a submission for the 2024 Hacktoberfest Writing challenge: Contributor Experience

Hacktoberfest is over. I completed the challenge this year with five open source contributions accepted. A sixth is still waiting on the maintainer.

I wrote about one of my PRs in "HacktoberFest Progress" post about drawing with Python. This time I want to talk about Animating with CSS.

HacktoberFest 2024 Progress

Chris Jarvis ・ Oct 18

#devchallenge #hacktoberfestchallenge #hacktoberfest #opensource

Animation Nation

Animation Nation set up a Gallery for playing CSS Animations. The documentation was clear and easy to follow. Contributors built their art then, added their gitHub name and art title to a JSON file. Animation Nation's code would grab the individual user's code and display it on their gallery.

You can see the gallery at Animation Nation. There are several great examples of CSS animation.

My Project

Since it was October, I decided to make a fall sky. I made a moon with animated clouds. The clouds move across the screen.

body{
    padding: 0;
    margin: 0;
    background: linear-gradient( var(--Purple), 
        var(--Black) 76%);
}

The sky is a purple to black gradient.

.moon{
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: var(--Moon);
    position: absolute;
}

The moon is a circle centered on the page. I played with a border but liked it better without one.

The clouds are where the challenge began. They needed more shape than a rectangle or circle. first attempt was just a long thin oval. I made a few of these basic shapes to get the positioning right. Then added a lower level of clouds.

.cloud {
    width: 300px;
    height: 50px;
    border-radius: 20%;
.
.
}

.cloud_low{
    margin-left: 300px;
    margin-top: 55px;
}

But the clouds were too flat. Circles were added to the .cloud class to give the cloud .fluff. The fluff class was positioed by changing margins to move it left or right.

            <div class="cloud">
                <div class="fluffLeft"></div>
                <div class="fluff"></div>
                <div class="fluffRight"></div>
            </div>

.fluffLeft{
    width: 140px;
    height: 45px;
    border-radius: 45%;
    margin-left: -44px;
    background: var(--White);
    position: relative;
    overflow: visible;
}
.fluffRight{
    width: 140px;
    height: 45px;
    border-radius: 45%;
    margin-right: -44px;
    background: var(--White);
    position: relative;
    overflow: visible;
}

The clouds have a drop shadow to make them stand out from the back ground.

filter: drop-shadow(-4px 2px 15px var(--Purple));

Animation

To move the clouds an animation called wind was used to move the clouds across the X-axis. For CSS animation, you give the animation a name then call it using 2Keyframes.

A large number was used to get the left most cloud all the way across the screen. To prevent the animation from resetting to the start at keyframe o, animation-fill-mode: forwards was used.

    animation-name: wind;
    animation-duration: 4.5s;
    animation-direction: normal;
    animation-fill-mode: forwards;
}

@keyframes wind {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(1450px);
  }
}

The clouds now float across the sky and off the screen.

Wrap up

It was fun to create an animation and watch other developers designs. It was also great to complete another HacktoberFest challenge. It's satisfying to help on other people's projects.

It disappointing there's no shirt or stickers again this year. But I understand the costs and trash concerns. The trees from previous years were a nice alternative.

Here's my Holopin badge showing 4 for 4 contributions. It's a sloth working at a computer.

Thanks for reading.