An Afternoon with SVGs | Frontend Challenge Entry

#frontendchallenge #devchallenge #css #javascript

This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities

What I Built

I've been looking for a small project to do that would let me play with Greensock (GSAP), specifically a bit with some SVG files I generated with Corel Vector. When I saw the frontend challenge and had an afternoon at work with downtime between a few projects, I knew it'd be a great opportunity to explore a bit!

Since my focus was on the GSAP piece (and limiting myself to less than 1 work day to complete [8 hours minus any urgent issues that cropped up]), I didn't do much in terms of functionality, but rather focus on my goal of "make it look neat with animations" (super specific, I know).

Demo

(Looks best in full screen)

Journey

After seeing that the theme was Summer Camp oriented, I immediately had the idea to create a tent with a campfire outside of it adding animation to make the fire glow and a tent flap that would rustle (which didn't make it in 😅). So I set to creating the shapes in Gravit. Since I thought the fire would look best with a dark/night setting, I also created a star shape and an oval for the ground - then exported everything as .svg files.

Next up was to start working on the Codepen file - I dropped in the HTML and started Googling for "How to import SVGs with JavaScript". Turns out that this is a non-trivial thing to do if the files aren't hosted somewhere 🙃 So I copied the SVG paths into the bottom of the HTML file since breaking them apart and importing them piecewise via JS didn't feel like a productive use of my limited time.

Once they started rendering, I began on my CSS - giving the form a white background and position the SVG elements. Then I moved my window to the side and ran into an issue - the SVG I was using for the ground I had positioned using negative values, and when the screen got smaller the ground would adjust further and further down until it was no longer showing in the window at all. My original ground looked like this:

So to make my alignment easier (aka be able to be set with bottom: 0 instead of negative units) I clipped the path down to this (which is the version that's in the demo):

Next I spruced up my form's visuals a bit by heading to Google Fonts and finding one that had camping vibes - eventually landing on Amatic SC. Then I had the wild idea of making the form look like a piece of paper, so that I could make the submit button fold the paper up into an envelope or paper airplane and fly off screen if it was submitted successfully (This was EXTREMELY high hopes and I didn't even get around to trying to start this animation in the time I allotted myself 😂). I started by trying to find a crumpled paper look on sites like Hero Patterns, but eventually found myself on this codepen:

In the interest of saving time, I decided this would give enough of the paper look without requiring too much excess work - huge thanks to enbee81 🙌🏻 While looking at how the CSS worked and updating the colors to match my background, I realized that I could use the radial gradients to give some depth to my sky, which ended up like this:

body{
    background: radial-gradient(ellipse at top center, #001333, transparent), 
    radial-gradient(ellipse at bottom center, #001333, transparent), 
    radial-gradient(ellipse at right center, #584C86, transparent), 
    radial-gradient(ellipse at left center , #584C86, #001333);
}

Now, as the user scrolled down the page the sky would "change".

It was around this time that an issue came up and I stopped work on this for the day - notably I haven't gotten to any GSAP animations yet 😅 So the next morning I had an hour between meetings and started the most fun part of the project!

The first thing I tried was using a "timeline" - which would be a span of time for my animations to run on:

const tl = gsap.timeline({paused: true, repeat: -1, yoyo: true});
// repeat set to -1 causing the timeline to repeat infinite times
// yoyo makes the animations play, then play in reverse back to the initial state

This was working, but I didn't like that all my animations were tied to a single block of time - so all the stars would start to twinkle at the same time, but then the stars on shorter times would stay static until all the animations finished, then they'd play in reverse and "hang" in a static state longer than I wanted.

Next I swapped to using to so I could specify the "Target state" for each SVG file.

gsap.to("#star-1", {scale: 1.5, duration: 17, repeat: -1, yoyo: true})

This block tells Star 1 to grow to 1.5x size, over the duration of 17 seconds, repeating infinitely, and with the "rewind" effect each time it completed the change.

The final addition I made was to give the fire a burning glow effect with a drop-shadow:

gsap.fromTo("#fire",{filter: "drop-shadow(0px -1px 5px rgba(255, 107, 30, 1))"}, { filter: "drop-shadow(0px -5px 7px rgba(255, 60, 24, 1))", duration: 2.5, repeat: -1, yoyo: true})

This time I used gsap.fromTo so I could specify additional effects to start from and go to. I start with a small orange drop shadow, then it grows and changes to a slightly more red color, before looping back to the original shadow over each 5 second loop (2.5 seconds each way).

A final issue I was running into here was I wanted to make the drop shadow much larger than the fire, but making it larger caused it to get clipped to a bounding box, which I'm guessing has something to do with the SVG setup - but this was a good stopping point and I'm happy with the results for the time I spent on it.

If I had unlimited time to work on this, I would have tried to solve the fire glow issue, added a flap to the tent, and added some kind of animation on submission of the form. I also briefly had considered making some kind of change to the scene based on the activity dropdown selection which could have been neat.