Animating vector paths in Framer (Animation Lesson 18)

Vector path animations can bring icons, logos, and illustrations to life, revealing each shape with smooth, hand-drawn motion.

And we can pull it of in just a few clicks using the Stroke effect in Framer. In this lesson, we’ll use the Stroke Effect to animate a few icons with engaging motion that feels thoughtful and refined.

00:00 Intro
00:24 Set up
02:11 Animate the signature with Stroke (defaults and preview)
04:06 Reverse the draw using Offset
04:59 Loop modes: repeat, mirror, continuous
05:51 Transition settings
06:17 Fingerprint icon animation
08:09 Lotus icon animation
09:26 Reverse path direction
12:22 Pulse icon animation
14:10 Wrap up

Sign up: https://framer.link/yt
Follow: https://framer.link/yt-x
Learn: https://framer.link/yt-academy