Let's break down why your animation is acting up after adding more sections, and fix it step by step:

Root Causes #

• Global selector bloat: Your current path selector targets every <path> element on the page. When you add more sections, you're probably adding more SVG paths (even hidden ones or part of other components), forcing the browser to animate far more elements than intended. This directly causes performance hits—slower playback, incomplete animations.
• Invalid animation value: stroke-dashoffset: 100% is incorrect. This property expects a length value (like pixels or matching your SVG's unit), not a percentage. Browsers handle this invalid value inconsistently, and the issue gets worse as more elements are added.
• Unscoped styles: Your CSS isn't limited to the specific SVG in your Embed, so it leaks to other parts of the Webflow site.

Fixed Code #

Replace your Embed code with this scoped, optimized version:

<svg class="animated-roof-icon" xmlns="http://www.w3.org/2000/svg" width="64" height="64" style="height:64px;width:64px">
  <path fill="none" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" d="M18 1h28v61L32 48 18 62z" />
  <path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" d="M23 22l7 7 13-13" />
</svg>
<style>
/* Scope styles exclusively to our target SVG */
.animated-roof-icon {
  height: 100%;
  width: 100%;
}

.animated-roof-icon path {
  animation: draw 2s normal forwards;
}

/* Target the roof-shaped path with its exact dash values */
.animated-roof-icon path:first-of-type {
  stroke-dasharray: 190;
  stroke-dashoffset: 190;
}

/* Target the checkmark path with its exact dash values + delay for better flow */
.animated-roof-icon path:last-of-type {
  stroke-dasharray: 29;
  stroke-dashoffset: 29;
  animation-delay: 1.2s;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
</style>

Key Improvements #

1. Scoped selector: Using .animated-roof-icon path ensures we only animate the paths inside your specific SVG, not every path on the page. No more wasted resources animating unrelated elements.
2. Valid animation values: We're using the exact stroke-dasharray values you originally defined for each path, and animating stroke-dashoffset from that value to 0—this is the standard, performance-friendly way to create SVG draw animations.
3. Staggered animation: Added a delay to the checkmark path so it draws after the roof, which looks more intentional and reduces overlapping animation workload.
4. Forwards fill: The forwards keyword keeps the final state of the animation (so the paths stay fully drawn instead of resetting).

Additional Performance Tips for Webflow #

• If you still see slowdowns, add will-change: stroke-dashoffset; to the .animated-roof-icon path selector—it tells the browser to prepare for this animation, optimizing GPU handling.
• Avoid stacking too many heavy custom animations on the same page; Webflow's built-in interactions can sometimes conflict with custom CSS, so test changes incrementally.

内容的提问来源于stack exchange，提问作者christopher kuchta