Framer Path Animation

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

framerdemo.mp4
4 MB
Download
Posted on Dec 25, 2017

More by Davo Galavotti

View profile