2

I am having trouble with CSS animations I added to a Webflow site in an Embed element. Before I added more sections to the page, the animations played a lot faster and the animation fully completed. Now after working on the site and adding more sections, the animations are slow and some do not complete.

Here is the embedded code I am using, if anyone could tell me why this is happening I would greatly appreciate the help :)

I am guessing the code is targeting the body? And that is why the animations got messed up when adding more sections?

<svg 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" stroke-dasharray="190,192"/>
  <path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" d="M23 22l7 7 13-13" stroke-dasharray="29,31"/>
</svg>
<style>

selector {
  property: value;
}

svg {
  height: 100%;
  width: 100%;
}

path {
  stroke-dasharray: 300
   ;
  animation: draw 2s normal;
}

@keyframes draw {
  from {
    stroke-dashoffset: 300
  }
  to {
    stroke-dashoffset: 100%;
  }
}
</style>

https://rova-roofing.webflow.io

icon animation section

christopher kuchta
  • 35
  • 4
  • 1
    You are missing a semicolon (`;`) `after stroke-dashoffset: 300`. Also 300 of what, you need to make it a percentage or a length. For example, `px`, `em`, or `rem`. – myjobistobehappy Nov 28 '20 at 20:07

1 Answers1

1

What you are looking for is animation speed. Try this:

<svg 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" stroke-dasharray="190,192"/>
  <path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" d="M23 22l7 7 13-13" stroke-dasharray="29,31"/>
</svg>
<style>
svg {
  height: 100%;
  width: 100%;
}

path {
  stroke-dasharray: 300px;
   ;
  animation: draw 5s normal; /*Change the speed right here*/
}

@keyframes draw {
  from {
    stroke-dashoffset: 300px;
  }
  to {
    stroke-dashoffset: 100%;
  }
}
</style>
myjobistobehappy
  • 736
  • 5
  • 16
  • I tried adding the code and nothing changed. In codepen it works perfect, I guess it has something to do with Webflow : https://codepen.io/kuchtaaa/pen/BaLyREE – christopher kuchta Nov 28 '20 at 20:49
  • Thanks for the responses. I was targeting another animation in a section below that had the same class causing the animation to change. Fixed now! :) – christopher kuchta Nov 28 '20 at 20:56
  • @christopherkuchta, I am happy it works. If my answer was your solution, please consider upvoting and/or selecting my answer. Thank you. – myjobistobehappy Nov 28 '20 at 22:14