New
New
New
Animation
Animated Step Counter in Framer
This project showcases five examples of SVG animations in Framer. All of the examples were rebuilt from the work of the magician, Jakub Krehel. Feel free to remix the project and see how SVGs can be animated in Framer super easily without writing a single line of code.v
Created by
About the resource
You might be asking: “Oh, these are cool, but how are you animating those SVG paths, Nandi?”
Well, let me show you. It’s most certainly easier than you think.
First, grab the pen tool (P) and draw the path you want to animate. This can be anything: a checkbox, underline, or your beautiful signature.
About the resource
You might be asking: “Oh, these are cool, but how are you animating those SVG paths, Nandi?”
Well, let me show you. It’s most certainly easier than you think.
First, grab the pen tool (P) and draw the path you want to animate. This can be anything: a checkbox, underline, or your beautiful signature.
About the resource
You might be asking: “Oh, these are cool, but how are you animating those SVG paths, Nandi?”
Well, let me show you. It’s most certainly easier than you think.
First, grab the pen tool (P) and draw the path you want to animate. This can be anything: a checkbox, underline, or your beautiful signature.
Path drawn with the pen tool (P) in Framer.
Path drawn with the pen tool (P) in Framer.
Path drawn with the pen tool (P) in Framer.
Then right click it, and select Create Vector Set.
Then right click it, and select Create Vector Set.
Then right click it, and select Create Vector Set.
Creating a vector set in Framer.
Creating a vector set in Framer.
Creating a vector set in Framer.
Why are we creating a vector set? Well, because within the vector set view, we can select our path once again, and now on the right panel, we’ll have a new section appear called
Effects. If you click that, you can add a stroke effect to the path, fine tune the properties, and you’re done.
Why are we creating a vector set? Well, because within the vector set view, we can select our path once again, and now on the right panel, we’ll have a new section appear called
Effects. If you click that, you can add a stroke effect to the path, fine tune the properties, and you’re done.
Why are we creating a vector set? Well, because within the vector set view, we can select our path once again, and now on the right panel, we’ll have a new section appear called
Effects. If you click that, you can add a stroke effect to the path, fine tune the properties, and you’re done.
Adding a stroke effect to our path.
Adding a stroke effect to our path.
Adding a stroke effect to our path.
So at this point, it’s just a matter of playing around and experimenting to create cool animations with your new knowledge.
So at this point, it’s just a matter of playing around and experimenting to create cool animations with your new knowledge.
So at this point, it’s just a matter of playing around and experimenting to create cool animations with your new knowledge.
