Add animated SVG in Webflow
Webflow's powerful features will make it easy for you to create aesthetically pleasing and responsive website designs without any coding skills. Add stunning SVG animations exported from SVGator and you will unlock a whole new level of creativity!
Find out how it works below.
1. Animate an SVG icon, illustration, or logo in SVGator. Once you are done, just click on the Export button in the app’s header:
2. In the Export panel, make sure you select CSS only as the animation type and let the animation start when the page loads (On load):
3. In Webflow, go to the Assets panel, click on the Upload icon, and select the animated SVG that you just exported from SVGator:
4. You can see that the SVG animation is already animated in the preview thumbnail.
5. Now you can simply drag it into your Webflow project where you can edit its properties in the same way as for regular images.
Insert interactive SVG animation- animate on mouse over
1. Before exporting the SVG from SVGator with CSS as the animation type, set the animation to start on mouse over. You can also set the animation to reverse, restart, or pause on mouse out.
2. Open the file in a text or code editing tool. Make sure that you select all the code and copy it to your clipboard. The code should look similar to this:
3. In Webflow, go to the Add panel and drag an Embed element into your canvas from the Components section. You can also use quick find (CMD/CTRL+E) and type embed.
4. You can paste the SVG code from the clipboard here and click on the “Save & Close” button.
5. The animation will not be visible in the project edit mode, only after you publish and preview the website in the browser, where the animation will start on mouse over.
6. This is how the preview looks like in our case.
Still got questions? Send us an email to email@example.com and we will get back to you as soon as we can.