Animating Chain attached to Scroll - https://asaro.co.uk/

[ainsley_clark]

Hi all,

 

I will be coding something in the near future that basically is a curved line down the page with a ball following it as its scrolled.

The line is dashed and will also be filled in on scroll.

In essence it will be similar to https://asaro.co.uk/.

 

I wouldn't know where to start. Would anyone have any ideas about how to code this with GSAP? I'm not looking for full blown code, just maybe some pointers on how to achieve this.

 

Many thanks in advance,

 

Ainsley.

 

[Carl]

Hi 

 

I wasn't able to find an example of that, but you can study a few individual pieces and then try to glue them together.

 

For revealing a path, you'll want to use DrawSVGPlugin: https://greensock.com/drawSVG (for Club members)

For revealing a stroked path you'll want to do use DrawSVG on a mask that reveals that dashed path:

See the Pen JKGezz by PointC (@PointC) on CodePen

For controlling an animation on scroll study ScrollMagic (not a GreenSock product)