How to Animate a World Mental Health Day SVG Ribbon

The World Health Organization’s “World Mental Health Day” is here, 10th of October 2018, to help raise awareness around mental health issues. This year the focus is on encouraging us all to support, and get involved with, programs and services that can reach young people, ideally effectively treating issues as early as possible.

To mark the day we’re going to be using CSS to animate an SVG centered on the green ribbon many people wear to symbolize mental health awareness.

We’ll have two hands coming together from the left and right sides of the stage to clasp together, illustrating the support people can provide one another, after which the green ribbon will appear along with some descriptive text.

When you’re done, you’ll have this animation (press RERUN if needed):

1. Get the Starter Code

I’ve prepared the SVG and HTML code for you in advance so you can just focus on using CSS to animate various elements that comprise the illustration.

To begin, create an empty HTML file, then copy and paste in the code you see below:

Save and preview your file in a browser and you should see this image, with all the SVG’s elements visible, some stacked on top of others:

World Mental Health Day 2018 first image

Let’s start with a breakdown of each element included in the SVG so you know what we’re working with.

First up we have the front hand that will enter from the left side of the SVG:

World Mental Health Day 2018 the hand

Then we have the rear hand that will enter from the right:

World Mental Health Day 2018 right hand

After the two open hands have crossed over in the center of the screen, we will replace them with the clasped hands:

World Mental Health Day 2018 clasped hands

We then have the green mental health awareness ribbon that will fade in:

World Mental Health Day 2018 green ribbon

The main “World Mental Health Day” text that will fade in after that:

World Mental Health Day 2018 text label

And the date text, which will be the final element to fade in:

World Mental Health Day 2018 subtitle

2. Start Adding CSS

Everything we need for our animation is already in the SVG code, we just need to reach in and target the elements it contains via their IDs.

The first thing we need to do is hide all the elements so we can later show each one at the appropriate time. Add the following code in between the <style></style> tags already present in the HTML file you just created.

3. Make the Front Hand Enter From the Left

We’ll be using @keyframes animations for every part of our sequence. The first animation we’ll create is one that can make an element move from a position outside the left edge of the SVG to its original position in the center.

Add the following code to your CSS.

Let’s step through what we’re doing with this code.

We only need to move our element from one position to another, rather than having it zigzag through interim positions. For that reason we can just use from and to rather than needing to specify percentage based keyframes.

In the from keyframe we will use the transform property to translate, i.e. reposition, the element all the way to the left, a position which is expressed as -100%. In the to keyframe we specify the element’s original position with 0%. The keyframe animation will automatically handle moving the element between the from and to states.

You’ll also notice the opacity is set to 1 in both keyframes. This means the element will appear at the beginning of the animation, stay visible all the way to the end, then revert back to the default opacity of 0 we set earlier and disappear once more. We need this to happen to make way for the clasped hands element that will appear afterwards.

Now we can apply the animation to the front hand element of our SVG, which uses the ID #fronthand. Add the following CSS to your code.

Here we are specifying the animation name, i.e. infromleft, which will trigger the animation we just created. In the second line we’re telling the animation to run over a period of 1.5 seconds. And in the third line we’re telling it to use the ease-out animation timing function, which will make the movement start fast then slow down towards the end.

When you save and refresh your page now you should see the front hand come in from the side and stop in the center, as pictured below, for a brief moment before vanishing:

World Mental Health Day 2018 hand

4. Make the Rear Hand Enter From the Right

We’ll now create another almost identical animation to the first, with the difference being the element will move in from the right instead of the left. Add this CSS to your style:

You’ll see that in the from keyframe, we translate by 100% instead of -100%, which pushes the animation starting point out past the right edge. Everything else in this code is the same as the last animation.

We’ll apply this animation to the rear hand element in the SVG by adding this code:

Now you should see the two hands coming together until they cross over in the middle before disappearing again.

World Mental Health Day 2018 hands crossing over

5. Make the Hands Clasp

We already have the two open hands disappearing once they’ve finished moving. Next up, we need to make the clasped hands element instantly appear at the exact moment the open hands disappear.

To make this happen we’ll create another keyframe animation named instantappear. All this animation will do is set the opacity to 1 throughout the animation. Add this CSS into your file:

Apply the animation to the #claspedhands element with this code:

Here, in the first two lines we call our instantappear animation and set its duration to 1 second.

In the third line we’re telling the animation to delay by 1.5 seconds, which corresponds with the duration of our first two animations. This way as soon as they’ve finished, this animation will begin.

Then in the fourth line we’re setting the animation-fill-mode property to forwards. What this does is tell the animation to stop on its last frame and stay there. This will keep the element at the opacity of 1 set in the end keyframe, instead of going back to the default opacity of 0 like our front and rear hands did.

Preview your animation and when it’s finished you should see this:

World Mental Health Day 2018 clasped hands

6. Fade in Remaining Elements With Reusable Keyframes

We only need one more animation for the three remaining elements, one that will fade in anything it’s applied to. We can use it on each element with different settings to complete our sequence.

Create a new animation named fadein and set it to transition from opacity 0 to opacity 1 like so:

The green ribbon is the next element we want to appear, so apply our new fadein animation to it with the following CSS:

Here we’re having the fade in effect last for three quarters of a second, and we set it to begin at 1.75 seconds, after the preceding animations are complete. Again we use animation-fill-mode: forwards; to ensure the element’s opacity stays at 1 rather than defaulting back to 0.

When your sequence completes you should now see this:

World Mental Health Day 2018 final animation

Now we’ll make the main text fade in as well. We already have a #wmhd style in the document, so update it to the following:

We’re using the same code as we did on the #ribbon element, just pushing out the delay to 2.25 seconds so we stagger the appearance of the items.

Your animation should now finish at this state:

World Mental Health Day 2018 finish state

Finally, we need to make the date appear, so update the existing #date style to:

Again, the only change is pushing out the start time of the animation.

Wrapping Up

With that last piece of code, your animation is now complete and when it finishes running it should look like this:

World Mental Health Day 2018 complete clasping hands animation

For more information on World Mental Health Day visit the WHO website.

Learn All About CSS Animation:

Find Out More About SVG Animation:

Posted by Web Monkey

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.