Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Animating SVG with CSS Keyframe and Line Drawing Animations Animating stroke-dasharray and stroke-dashoffset

Posted by Megan Weber
Megan Weber
28,554 Points

Trying to Use Javascript to Initialize Array & Offset. Why is it Not Working?

I decided to use a transition instead of keyframes. The animation starts immediately when it's supposed to wait for hover, & instead of starting hidden & drawing itself it starts drawn & erases itself. Here is the Mediafire link.

1 Answer

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

The "animation" you see initially is just the initial offset being established by the transition. I found the following issues with the other functionality:

  • The CSS needs to know the initial dashoffset, so it can perform the transition on hover (and return after).
  • "Path" apparently has no physical presence of its own, so it can't be a hover target (but the SVG can be).
  • Since the length had to be added to the CSS anyway, I eliminated the JavaScript code entirely.
partial-style.css 
path {
  stroke-dasharray: 71px;
  stroke-dashoffset: 71px;   /* <-- initial offset is established here */
  transition: stroke-dashoffset 1s linear;
}
svg:hover path {             /* <-- svg is the hover target (path is still the rule target) */
  stroke-dashoffset: 0; */
}

After all this, I'm not sure if this is what you really want, since the offset position returns when the mouse goes away from the SVG. If you want a one-time animation, then you'll want to go back to using keyframe animation.