Overlap Associates

Transforming boring page interaction with smooth SVG line animations.

Project Detail

We were approached by our long-term partner, Hyphen Co to help them build a website for a canadian marketing agency. Some of the key features are as follow:

  • SVG line animations upon scrolling to certain sections.
  • PJAX Transition for member selection. This is the page.
  • A fully interactive diagram.

SVG Line Animations

We were really excited when Hyphen wanted to utilize this technique. The way it works is to basically change the stroke-dashoffset of each path. We used ScrollMagic for triggering this animation and GSAP for the animation itself.