I’m not sure if anyone has done anything like this before, but I had real trouble finding any documentation when doing my SVG animation and custom code. I thought I’d create a guide so that people can see how I did it, and hopefully at least someone will find it helpful.
1. Make the SVG.
I used Illustrator to make my SVG. I drew a box with a red square in the middle for the purpose of this tutorial. You may already have an SVG (which is fine too).
2. Get SVG Code
To animate your SVG in Webflow, you need the source HTML code of the graphic itself. In Illustrator, go to:
- File>Export>Export as
- Then select the ‘SVG’ option from the dropdown and press ‘save’.
- You’ll see a dialog box with SVG options, make sure minify and responsive are selected.
- Then press show code.
If you already have an SVG that you’re using, then you can choose to open it in text editor, and then this will show you the code.
3. Put the SVG code into a HTML editor
Copy and paste your code from the text document to an online HTML editor. Any editor is fine, but I use JS fiddle.
4. Find the <style> tag
Most SVGs will have their style tag at the top of the code (above all of the actual SVG code itself). You may wish to tidy the code, as I have done. I find this helps and makes things way easier to control.
You can see that I have organised the code as you would do on a typical style sheet, adding a return after every new instruction (CSS instructions are defined by a semi-colon ;).
5. Decide on what animation you’re using
So, what we’re actually going to do is use inline CSS animation to animate the SVG. If you’re not au fait with the basics of CSS, you might want to click on the above link and give the tutorial a quick read - but I will do my best to explain!
There are multiple types of CSS animation you can use, but for this tutorial, all I will be doing is changing the colour of the boxes when the user hovers over the SVG.
6. Start by adding the ‘Hover’ code
My original <style> code looked like this:
.cls-1{
fill:#fff;
stroke:#231f20;
stroke-miterlimit:10;
stroke-width:100px;
}
.cls-2{
fill:#ed1c24;
}
In the above code, .cls-1 defines my outer black box, and .cls-2 defines my inner red box.
What I wanted to do was have it so that the red box turns black, and the black box turns red. To do this, I added in the following code between the <style> tags:
svg:hover .cls-1{
stroke:red
}
svg:hover .cls-2{
fill:black
}
This code says that, whenever the SVG is hovered over, then it should:
- Change stroke of cls-1( the outer box) to red.
- Change the fill colour of cls-2 (the inner box) to black.
7. Adding animation smoothing
At the moment, my SVG abruptly changes colour, which is fine, but doesn’t look GREAT. So, in the .cls-1 definition, I added in the following:
<style>
.cls-1{
fill:#fff;
stroke:#231f20;
stroke-miterlimit:10;
stroke-width:100px;
-webkit-transition-property: stroke;
-webkit-transition-duration: 0.15s;
-webkit-transition-timing-function: ease-in-out;
transition-property: stroke;
transition-duration: 0.15s;
transition-timing-function: ease-in-out;
}
.cls-2{
fill:#ed1c24;
-webkit-transition-property: fill;
-webkit-transition-duration: 0.15s;
-webkit-transition-timing-function: ease-in-out;
transition-property: fill;
transition-duration: 0.15s;
transition-timing-function: ease-in-out;
}
For your SVG, you may wish to change the timing-function, and transition-duration to get your desired effect. One thing you must ensure is that the transition-property is set to your desired attribute.
In my case, I wanted to change the stroke of cls-1, and the fill of cls-2.
8. The finished code
Here is my finished code:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 845.371 845.371"><defs><style>
.cls-1{
fill:#fff;
stroke:#231f20;
stroke-miterlimit:10;
stroke-width:100px;
-webkit-transition-property: stroke;
-webkit-transition-duration: 0.15s;
-webkit-transition-timing-function: ease-in-out;
transition-property: stroke;
transition-duration: 0.15s;
transition-timing-function: ease-in-out;
}
.cls-2{
fill:#ed1c24;
-webkit-transition-property: fill;
-webkit-transition-duration: 0.15s;
-webkit-transition-timing-function: ease-in-out;
transition-property: fill;
transition-duration: 0.15s;
transition-timing-function: ease-in-out;
}
svg:hover .cls-1{
stroke:red
}
svg:hover .cls-2{
fill:black
}
</style></defs><title>Untitled-1</title><rect class="cls-1" x="50" y="50" width="745.371" height="745.371"/><rect class="cls-2" x="254.133" y="254.133" width="337.105" height="337.105"/></svg>
9. Implement
To get your SVG on a website, add a custom code block, and copy and paste your entire code into the custom code block. (If your code exceeds the custom character limit, scroll down for my workaround)
Then, edit your custom code element in Webflow as you normally would do with a div or image block.
This is my result. Whilst mine is very simple, you can also animate other properties of an SVG using the same technique. This method is a great way to animate an SVG using pure CSS, rather than using Webflow’s hover feature and changing the image completely.
10. What to do if you exceed the custom code character limit?
Some SVG’s can be very lengthy. This is not ideal, as the Webflow custom code has a character limit. But there is a workaround. Just follow these steps:
-
Make a GitHub account
-
Make a new repository (call it whatever you like) and make it public
-
Choose ‘create new file’
-
Copy your code from your online HTML editor and then paste the code into the new file.
-
Name your file and add the exntsion .html (for example [repositoryname]/logo.html)
-
Click ‘commit new file’
-
In your repository, open your file, and then click ‘raw’
-
Copy the URL of the RAW format, it should, look like this:
https://raw.githubusercontent.com/username/respositoryname/master/filename.html -
Go back to your Webflow page where you require the SVG and add a custom code block.
-
Add this code to your custom code block:
<div id="ajaxContent"></div><script> var Webflow = Webflow || []; Webflow.push(function() { $.get('YOUR COPIED LINK HERE', function(data) { $('#ajaxContent').append(data); }); }); </script>
-
Paste your copied RAW url into the ‘YOUR COPIED LINK HERE’ section, and then press save.
-
Publish your website and test.
I hope this guide helped a bit. If you have any questions, reply to this post or hit me up.