Trending designs to inspire you
Work designers are riffing on
Interviews, tutorials, and more
Prompt to flex your design skills
Find your dream design job
An exclusive list for contract work
Find, contact, and hire designers
The #1 job board for creatives
Board for freelance & contract work
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.