SVG Animator Component

Copy component

SVG Animator Component

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Component

SVG Animator Component

This is an awesome code component by Benjamin for Framer. It takes your SVGs and animates them in such a way that your visitors will be like, "wow".

image of Nandi Muzsik
profile image of Benjamin den Boer

Created by

SVG Animator Component
SVG Animator Component
SVG Animator Component

About the resource

Fully customizable through component properties, here's what you can do:

  • Select SVG layer.

  • Turn animation on and off.

  • Set looping.

  • Show or hide end circle.

  • Specify start and end state in percentage.

  • Animation properties.

About the resource

Fully customizable through component properties, here's what you can do:

  • Select SVG layer.

  • Turn animation on and off.

  • Set looping.

  • Show or hide end circle.

  • Specify start and end state in percentage.

  • Animation properties.

About the resource

Fully customizable through component properties, here's what you can do:

  • Select SVG layer.

  • Turn animation on and off.

  • Set looping.

  • Show or hide end circle.

  • Specify start and end state in percentage.

  • Animation properties.

animator component properties

SVG animator component properties in Framer.

animator component properties

SVG animator component properties in Framer.

animator component properties

SVG animator component properties in Framer.

If you import and SVG layer to Framer make sure to store them on the canvas next to the breakpoint and double click them before you can connect them to the component.

If you import and SVG layer to Framer make sure to store them on the canvas next to the breakpoint and double click them before you can connect them to the component.

If you import and SVG layer to Framer make sure to store them on the canvas next to the breakpoint and double click them before you can connect them to the component.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Celebratory screen with colorful floating balloons and a 'Hurray!' message

    Balloons Component for Framer

    Component

    Celebratory screen with colorful floating balloons and a 'Hurray!' message

    Balloons Component for Framer

    Component

    Celebratory screen with colorful floating balloons and a 'Hurray!' message

    Balloons Component for Framer

    Component

  • FAQ accordion menu with multiple questions about Framer website

    FAQ Accordion Component in Framer

    Component

    FAQ accordion menu with multiple questions about Framer website

    FAQ Accordion Component in Framer

    Component

    FAQ accordion menu with multiple questions about Framer website

    FAQ Accordion Component in Framer

    Component