Animating vector paths in Framer (Animation Lesson 18)

Quick Overview

Framer's Stroke Effect allows users to animate individual vector paths within an icon set by controlling properties like Length, Gap, Offset, and Loop type (Repeat, Mirror, Continuous), enabling the creation of engaging reveal animations for icons like signatures and pulses.

Key Points: The Stroke Effect is applied to vector paths within Framer to create animated reveals, such as drawing icons onto the screen. Key Stroke Effect properties include Length (controlling how much of the path is drawn), Gap (the distance between drawn segments), and Offset (to shift the animation start point). Loop types—Repeat, Mirror, and Continuous—determine how the animation behaves upon completion; Continuous provides smooth, endless playback without a hard reset. The signature icon animation demonstrated how setting Length to 10% and Gap to 100% creates a dashed line effect during the draw. The fingerprint icon animation utilized path opacity manipulation (reducing the base layer opacity to 20% and keeping the animated layer at 100%) to achieve a fade-in effect. The pulse icon demonstrated continuous animation using the Linear transition, resulting in a constant, steady drawing speed, unlike the default Ease-In-Out. The lotus flower icon animation showed how reversing the path direction (Reverse Path Direction) causes the stroke to draw from bottom to top instead of the default top to bottom.

Context: This video tutorial, presented by Joseph Tadaro, Education at Framer, focuses on leveraging the Stroke Effect feature within Framer to animate vector icons. The instructor demonstrates how to apply this effect to various icons within a pre-made 'Icon Set' asset to achieve sophisticated, handcrafted-looking reveals, emphasizing the control offered over path drawing, looping behavior, and easing transitions.

Detailed Analysis

The tutorial explains how to use Framer's Stroke Effect to animate vector paths, essential for creating engaging icon reveals. The process begins by selecting a group of vector layers (like the initial set of icons) and applying the Stroke effect to them. The instructor first demonstrates on a signature icon: setting Length to 10% and Gap to 100% causes the line to draw as a dash, revealing only 10% of the total path length at any given time. The instructor then explores loop types: Repeat plays the animation from start to end, then abruptly jumps back; Mirror plays forward then backward; and Continuous plays forward, then immediately continues from where it left off without resetting. For the pulse icon, the instructor switched the transition from the default Ease-In-Out to Linear to maintain a constant drawing speed. For the lotus flower icon, the instructor selected one of its paths and used 'Reverse Path Direction' to change the drawing order from bottom-up instead of top-down. Finally, the instructor shows how to create layered animations by duplicating groups and manipulating the opacity of the base layer (e.g., setting the base fingerprint layer opacity to 20% while the animated layer remains at 100% opacity) to create a fade-in effect.