Stroke Dashes in Adobe After Effects – Full Guide

 

Absolutely! Here's a detailed and beginner-friendly guide on Stroke Dashes in Adobe After Effects — a super useful feature for stylizing your shape layers!

---

🎨 Stroke Dashes in Adobe After Effects

Stroke Dashes let you create dashed or dotted outlines around your shapes. Perfect for motion graphics, infographics, UI animations, and stylized borders.

---

🛠️ Where to Find Stroke Dashes

1. Draw a Shape
   Use the Shape Tool (e.g., Rectangle, Ellipse).

2. In the Timeline Panel, expand:

   Shape Layer >
     Contents >
       [Your Shape] >
         Stroke 1 >
           Dashes
   

3. If you don’t see “Dashes,” click "Add" ➕ (next to Contents) and choose Dashes.

---

🧩 Stroke Dashes Options

After adding Dashes, you’ll see these properties:

Property	Description
Dash	Sets the length of the visible line part
Gap	Controls the space between dashes
Offset	Moves the pattern along the path (great for animations!)

🧪 You can add multiple Dash/Gap pairs for more complex styles!

---

✨ Example Configurations

Style	Dash	Gap	Result
Dotted Line	0	10	Tiny dots
Dashed Line	10	5	Classic dash
Fancy Combo	15, 5, 3, 7	—	Custom alternating pattern

---

🎞️ Animate Stroke Dashes

To create a looping animated dash effect:

1. Add keyframes to the Offset property.

2. Animate from 0 to 360 (or higher) over time.

3. Result: A dashed outline that rotates around the shape – perfect for loaders or attention-grabbing UI elements.

---

💡 Pro Tips

• Combine with Trim Paths for cool animated borders.

• Use Repeater + Dashes for funky patterns or shape trails.

• Hold Shift when adjusting values to increase precision.

---

🧠 Creative Uses

• Loading animations

• Border outlines on lower-thirds

• Decorative rings around icons or text

• Glowing dashed effects with Glow + Stroke + Offset