Reveal a svgpath with dash and gap

Using JavaScript with Hype Function Library
4

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

11 Likes