Index


Animated SVGs in Flexitive

Use animated SVGs to add single or looping animations to your Flexitive design, e.g. an animated logo. 


See an example of an animated SVG below;



Once added to your canvas, the animated SVG will animate on the frame it’s visible on, not at the start of your first frame.


Single v Looped SVGs

  • Looped Animated SVGs will continuously play/animated on your canvas while designing.
  • Animated SVGs are set to play once and will show as soon as you drag it onto the canvas and begin designing. 



Best Practices for Creating Animated SVGs


Before creating your animated SVGs, we recommend checking out our best practices below;


  • When exporting your animated SVG, it should be exported for CSS, and not JavaScript. 

  • Remember that SVGs are not compressed when exported from Flexitive.

  • To keep your file size low, we recommend using vector elements when creating your animated SVGs.

  • Vector element allows your animated SVG to be scalable to any size in Flexitive without increasing file size or losing quality.

  • Plan how your animated SVG will work with the animation sequence you build in Flexitive, as it will animate independently and according to how you export it.

    • Will your SVG be looping or will it just run once?



Upload Animated SVGs to Flexitive


To upload an animated SVG to Flexitive, open the Assets panel, and click on the Images tab. 


Select 'Upload Images' and select the asset you'd like to upload to your Flexitive project.



If you would like, you can also upload files to your design by dragging and dropping them from your desktop folder onto the Assets panel or the canvas.