Line Dash Animate with Line Draw

I understand, you’ve done an incredible job on hype 4 beta as is, so thank you. I’m sure this will be included after major release 4 and until then I’m going to be using the above method. When it comes to css, are you referring to what you could’ve done or it can be done now by styling it via Edit Head HTML? Because I tried to define a class now it doesn’t seem to work .linedrawdotted {border-style: dotted;}

I’m actually anticipating the release of Hype 4 and put it to good use.

1 Like

Hype would be using javascript, but you could do this via CSS in the head html. However you first need to do the calculations that the above code does and come up with the dashStr. You could output that. Then you need to apply the CSS to the SVG path element (Hype will name this elementid_path) with the stroke-dasharray property. (border-style is for DOM boxes).

3 Likes

… and be aware that my provided hack does not support dynamic changes of the length of the path …

1 Like

Daniel, How do I have just the dots as line draw vs what i have now line draw from dots to dash oscillating?

dashing.hype.zip (13.6 KB)

isn’t it an optical Illusion¿ caused by speed …
Human being: never trust your eyes :slight_smile:

1 Like

May look like an optical illusion but its clearly changing from dots to dash and Im not sure if speed is affecting it . A solution would be great to just have rounded dots?

it's not! it just looks like, because of an optical illusion ... or?
export to video allows to examine it :slight_smile:

Exported it as 30 FPS Its clearly a dash, yes. Hypes optimal frame rate is 60 FPS or higher so when previewing its making it look like theres a dot. How do I convert a dash into a dot?

What does this mean¿

What I meant to say is 5px border dots vs dash? I noticed that when its 1px border it kinda looks like dots but its too small which is why I wanted to see it bigger¿<— is this your signature question mark?

I think you’d need code to update and adapt every frame to offset for the new position in the line draw. I’m not sure what this would look like because I don’t know off the top of my head how the CSS and SVG line offsets fully interact. You could potentially use the math equation and run javascript there which would recalculate. Not a simple task.

As for drawing as dots, I assume you mean the round line cap? You can just change that to the “butt” option in the element inspector.

round linecap, 5 px strokewidth, strokeDasharray = ‘0 10’ :slight_smile: rule: the second value twice as much as the strokewidth <- just previewed in chrome …

edit: newest ff and safari desktop will work too …

Cool! Can you please elaborate with a Hype beta file? Thank you

I added the code on Scene Load but the path is not dashed.
What am i doing wrong?
Thank you.Crayon.hype.zip (12.3 KB)

The query selector in the dash() method operates on class names:

var hypePaths = document.querySelectorAll('.path');

Therefore you need to add a Class Name in the Document Inspector of "path":

Screen Shot 2021-01-18 at 4.22.13 PM

When I choose ‘path’ it works.
Why, if I choose another name as class and then edit the name also in the code it does not work? It is mandatory to use ‘path’?

no, the class-selector should work on any class.

btw did some work on it here

The class on the object is ‘spirale’.

I change ‘path’ into ‘spirale’ and it does not work.

bm-capture- 2021-01-19 à 08.29.52

The second selector is a tagselector not meant to be changed (as you can see there's no dot in front) ... just the first has to be changed. you've been to greedy in changes :wink:

1 Like

OK thank you.
I was misled because in the code both ‘path’ were in color.
I'm not a developer this is why I don't have a clue… :wink:

1 Like