Reveal a svgpath with dash and gap

https://www2.aachener-zeitung.de/zva/karlo/test/revealSVGPathStrokeDashGap/

revealSVGPathStrokeDashGap.hype.zip (25.9 KB)

This little tool enables the reveal of a svgpath with dash and gap.
It works great with Hypes morphing –> thx to @MaxZieb for his hypespecific MutationObserver … even offers an easy way to do primitive charts …

////
setup:

  • add a class of revealPath to a Hype-Vectorshape
  • add two data-attributes to it:
    data-dashpercent -> integer between 0 - 100
    data-gappercent -> integer between 0 - 100
  • add a drawline-animation

that’s it

////////////////////////////

I’d guess that there’s a lot of space for creative usage here … :slight_smile:

12 Likes

Awesome!

2 Likes

Nice! I didn’t dive into your code - do you think there’s a way to animate the offset in opposition of the line so that the dots can stay in the same spot?

https://www2.aachener-zeitung.de/zva/karlo/test/revealSVGPathStrokeDashGap_002/

revealSVGPathStrokeDashGap_002.hype.zip (31.4 KB)

hi @jonathan,
i’ve added the opportunity to set a data-attribute data-passivereveal (value: true) so the dots can stay in the same spot <- the white vectors in the examplelink above. thx for the idea :slight_smile: nice sundaymorning-project :slight_smile: Hope it’ll work!

////
NO CODING REQUIRED

setup:

  • add a class of revealPath to a Hype-Vectorshape
  • add two data-attributes to it:
    data-dashpercent -> integer between 0 - 100
    data-gappercent -> integer between 0 - 100
  • add a drawline-animation

optional data-attribute:
data-passivereveal -> true

10 Likes

Wow, that’s amazing, I wish I could give more likes!!!

There have definitely been a number of requests for this so it is great that you were able to put together this solution.

Great work! :smiley:

2 Likes

thx :slight_smile:

changing the attributes along timelines could also allow creative effects … just a thought

https://www2.aachener-zeitung.de/zva/karlo/test/startStop/

just a playground around the pathanimation …
in fact you could even morph the path for the time/watch and the progress would be correct … :slight_smile:

NO CUSTOM CODING

startStop.hype.zip (18.5 KB)

6 Likes

Do you mean like the stroke coloring you did with the stopwatch animation?

no, i mean the dash and gap … increase, decrease something around this …

1 Like

change the dash along the animation:
https://www2.aachener-zeitung.de/zva/karlo/test/changeDashGapOnProgress/

6 Likes

Ah gotchya :slight_smile:!

1 Like