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 …
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?
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 nice sundaymorning-project 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
