# Animation Vectors in Framer (Vectors Lesson 5)

Source: https://www.youtube.com/watch?v=AJAShXzeJpI
Recap page: https://rapidrecap.app/video/AJAShXzeJpI
Generated: 2026-03-03T17:07:26.954+00:00

---
## Quick Overview

The video demonstrates how to use the Stroke Effect in Framer to animate vector paths by controlling parameters like Length, Gap, Offset, Loop type (Repeat, Mirror, Continuous), and Transition (Ease In Out), ultimately allowing for the creation of rich, custom draw-on animations that can be dynamically connected to content via Framer CMS.

**Key Points:**
- The Stroke Effect in Framer animates vector paths by revealing the stroke over time, controlled by parameters like Length, Gap, Offset, Loop, and Transition.
- The Length parameter controls how much of the path is visible at any given time.
- The Gap parameter adjusts the spacing between segments of the animated path, which also controls the creation of dashed lines.
- The Loop option offers three modes: Repeat (starts over), Mirror (plays forward then backward), and Continuous (keeps moving forward).
- The Transition settings, particularly the Bezier curve editor, allow for fine-tuning the speed and easing of the animation for a more polished feel.
- Complex shapes made of multiple paths can have the Stroke Effect applied to all paths simultaneously by selecting the parent group.
- The final tip is to test animations in context, ensuring they feel subtle and intentional when integrated with the final website content.

![Screenshot at 01:36: The Stroke Effect configuration modal is displayed, showing adjustable settings for Length, Gap, Offset, Loop type, and Transition easing for a complex, wavy vector path.](https://ss.rapidrecap.app/screens/AJAShXzeJpI/00-01-36.jpg)

**Context:** Justin Jones, Education at Framer, presents a tutorial focusing on animating vector graphics within the Framer design tool, specifically detailing the parameters available within the 'Stroke Effect' feature. This lesson follows previous ones on creating paths and shapes, aiming to add motion and polish to static vector assets.

## Detailed Analysis

The tutorial explains how to use the Stroke Effect in Framer to animate vector paths, which is superior to simply animating path visibility, as it reveals the stroke along the path over time. The speaker demonstrates this using a winding, rounded vector shape. Key controls within the Stroke Effect panel include Length, which dictates how much of the path is visible; Gap, which controls the space between segments and can simulate dashed lines; and Offset, which shifts the stroke along the path. Furthermore, the Loop setting provides three animation behaviors: Repeat, which restarts the animation sequence; Mirror, which plays the animation forward and then backward; and Continuous, which keeps the draw-on animation moving indefinitely without resetting. The Transition settings, featuring an Ease curve editor (like the default 'Ease In Out' Bezier curve 0.44, 0, 0.56, 1), control the duration and pacing of the animation. The speaker notes that small adjustments to these parameters drastically improve the engagement of the final animation. Finally, the effect can be applied to complex shapes composed of multiple paths by selecting the parent vector group, and the presenter emphasizes the importance of testing the animation in its final context to ensure it feels subtle and intentional.

### Stroke Effect Parameters

- Length controls visibility percentage
- Gap manages spacing/dashing
- Offset shifts the visible stroke along the path

### Looping Options

- Repeat draws the path and restarts
- Mirror draws forward then backward
- Continuous keeps drawing forward indefinitely

### Transition Control

- Adjusts animation duration and easing using a Bezier curve editor, allowing for custom smoothness (e.g., Ease In Out)

### Application to Complex Vectors

- The Stroke Effect can be applied to an entire group containing multiple paths simultaneously, enabling richer draw-on animations for icons like the lotus shown.

### Best Practices

- Keep paths simple for best results
- Stack vector groups to layer multiple stroke effects
- Always test animations in context for subtle, intentional feel

![Screenshot at 00:01: Demonstration of path creation and manipulation in the vector editing interface.](https://ss.rapidrecap.app/screens/AJAShXzeJpI/00-00-01.jpg)
![Screenshot at 00:04: The Framer interface displaying the Vector Sets library containing numerous icon assets.](https://ss.rapidrecap.app/screens/AJAShXzeJpI/00-00-04.jpg)
![Screenshot at 01:28: The wavy vector shape selected, with the 'Stroke Effect' panel open showing initial settings.](https://ss.rapidrecap.app/screens/AJAShXzeJpI/00-01-28.jpg)
![Screenshot at 01:58: A dedicated screen explaining the 'Length' parameter by showing a segment of the path being revealed.](https://ss.rapidrecap.app/screens/AJAShXzeJpI/00-01-58.jpg)
![Screenshot at 03:16: Demonstration of right-clicking a path layer and selecting 'Reverse Path Direction' to alter the animation flow.](https://ss.rapidrecap.app/screens/AJAShXzeJpI/00-03-16.jpg)