Framer Path Animation

  • Save
Framerpathanimation

Paperclip 3 Attachments

Here is my latest exploration about how to animate SVG elements created with @Framer.

1. How to animate line stroke using the stroke array offset technique with a SVG path draw with Framer.

The technique is based on the premise of manipulating the CSS DOM and creating custom keyframes.

2. If you tap on the screen you will run transitions over the SVG elements using Framer's native API.

There are many animation techniques that we can leverage on top of SVG. My challenge was to implement something without using a third-party library such as GSAP.

https://framer.cloud/gTLpa

keyboard shortcuts: L or F like