Published on | Prototyping: From UX to Front End — Medium Nick Bewley

Working within the Clarity Design system at VMware, there is often opportunity to instill subtle bits of fun within more complex workflows. During a recent project, I discovered the opportunity to morph an element into a checkmark, then animate said checkmark using a line animation.

I’m not a tools purist, but believe that different tools excel in different circumstances. If you have the need for line animation and are working with SVG assets, Framer is a great way to quickly show your ideas. Here’s what we will be creating:

Simplify your shapes. You will be animating the “path” element.

Step 1: Prepare Your SVG

Find an SVG line element and open Illustrator or Sketch. You want to insure that SVG has “path” elements. Combine and simplify your shapes (you’ll notice that I only have two in the attached image). Name your layers for convenience later, then click “File > Save As > SVG,” and select the default options.

Next, open the saved SVG in a text editor to continue preparing the SVG. Here’s how my SVG looks after exporting from Illustrator (Sketch will give you slightly different results. Depending on your Illustrator version, as well, you may encounter slightly different structure):

Delete the first two lines above, start with <svg>

Step 2: Fire Up Framer

Start a new Framer file and create a layer (“alarm”) with the same dimensions as your SVG. Add your svg to the Framer layer by using Framer’s html function: alarm.html = [paste your svg] . Now, clean up your SVG in Framer to work with Framer’s coffeescript. Remove any new lines, change double quotes to single quotes, and remove the lines (for now) between <style> and </style> . Keep these handy for future use. Your final svg should look like this in the Framer editor (no errors!):

Remove single quotes and collapse the SVG code to a single line. Keep the <style> declaration for later.

Step 3: Customize Framer HTML

Okay, don’t get scared now 😉 Open your .framer project in a text editor—I use Atom—and navigate to the “index.html.” Add jquery under the other “scripts” using this code <script src=”https://code.jquery.com/jquery-3.2.1.min.js”></script> .

Next, we’ll need to access the SVG to add the line animation. First, find the SVG path’s ID that you would like to animate (mine is “alarm”). Now, take that ID and pass it into the following function, replacing your SVG ID with “alarm”. This code adds a CSS class to the SVG element, which we can later use to animate the SVG:

Finally, we will need to find the length of the SVG path to use in our animation specs that follow. Hop over to Framer and insert the following code, replacing your ID with “alarm” as before:

Now, visit the Framer console (“View > Show Console”) and voila, you should see a number representing the path length. Mine is “73.42230224609375.”

Step 4: Animate!

After completing the setup for the animation, now we can look into having some fun! We will be using a SVG line animation, you can read more about the technical details behind it here. Hop back over to your index.html and input the following code:

Enter the <style> and path length in the appropriate locations.

Add the styling content between <style> and </style> that you saved from earlier, using the format above. Input the path length in three places above: stroke-dasharray, and the two instances of stroke-dashoffset. Finally, start the animation by adding the animation code from the “alarmBellAnimation” function you added earlier by placing alarmBellAnimation() to the bottom of your Framer project.

The fun can continue in what you do in the <animation> declaration in your CSS. There are plenty of different things you can do with the animation, even custom bezier curve animation. You can create your own custom easing function using this tool, for example, to integrate your own animation easings.

Ship It!

If you hit any roadblocks, feel free to download the files used here from Github. Drop a line with any questions, as well. Happy Prototyping!

Line Animation with Framer & SVG was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Line Animation with Framer & SVG

Cool stuff, every week

More Articles