Animated dash SVG line without JavaScript

michelangelo · August 6, 2015, 9:28pm

HI guys I would share a method to animate a dash line.
in the example below I used an external SWG draw.

<svg width="100%" height="100%" id="dash-line" viewBox="0 0 230.214 109.31">
 <defs>
  <style type="text/css">   
    .str1 {stroke:#000;stroke-width:1.39804;stroke-dasharray:6 9;stroke-dashoffset:30}
    .fil0 {fill:none}   
  </style>
 </defs>
  <path class="fil0 str1" d="M115.107 0.34383c63.3712,0 114.763,24.3211 114.763,54.311 0,29.99 -51.392,54.3111 -114.763,54.3111 -63.3713,0 -114.763,-24.3211 -114.763,-54.3111 0,-29.9899 51.392,-54.311 114.763,-54.311z"></path>

</svg>

you can create and animate any kind of dash line.
the value depend on the length in pixel of the dash line.
For example a line with 6 + 9 (offset) pixel for the segment would be:

{ stroke-dasharray:6 9; stroke-dashoffset:30 }

you must edit this value: stroke-dashoffset:30

3, 6, 9, 12, 15, 18, 21, 24, 27 and the final step of the loop 30
9 steps to close the animation.

If you need a smooth animation you must create a key in every frame.

VIEW DEMO 2

With this rule you can create any dashline and related speed.

Pro: No Javascrip required, no external libraries, fast also in slow devices, low memory required.

Cons: Hard to implement because yoù can’t drag an external SWG. You must open the SWG in an external text editor and copy/paste only the right code in the text box in Hype ( inter html ).

dash_line_animnated.hypetemplate.zip (126.1 KB)

hope this helps

gasspence · August 7, 2015, 12:46am

That’s awesome, thanks.

drewbullen · August 7, 2015, 1:09am

The “stroke-dashoffset” method is the same method that most SVG line drawing libraries use.

However, these libraries offer a great deal more in terms of convenience, shortened development time and cross-browser compatibility.

In fact, each of these libraries offer some combination of methods for:

start
stop
pause
reverse
clear
delay
synchronize
bidirectional animation
etc.

Some even have there own timeline capabilities and the ability to access a machine’s GPU where available. According to some library providers they can achieve up to 60 fps graphics performance.

In general, I think these libraries have more to offer than manually coding the stroke-dashoffset property with little or no downside.

michelangelo · August 7, 2015, 3:06am

@gasspence Thanks

@drewbullen
thanks for your suggestion, yes, with library is much better.

However my method is different.
It works without any external library or js and run smoothly on all browsers, IE and android included.

if you need some lines in your project ( for example in architectural design or in a map) in 5 minutes you can make it, also by a beginner.

If you have a project with a lot of dash lines probably is better the external library.

thanks again

Bendora · April 25, 2016, 7:44am

Michelangelo,

if I build a vector-stroke in Illustrator and export it as a SVG in an innerHTML. Could I animate this stroke also in Hype?

I ask due to the fact I would like to generate a series of animated gifs on export. Photoshop doesn’t have easing. And that is a sad story. I see that Hype can export animated Gifs. But while it only works with divs boxes making a stroke seen in this screenshot is not that easily made or animated in Hype. I would think. I don’t own the program Sketch, that was a animation module that can be installed. And making it in Aftereffects feels to much work. But I could go there an do it.

Any thoughts or ideas?

Cheers
Dennis (Bendora)

Screenshot: