[Master timeline concept - adding delays to when each animation is called]

master.add(fadeImage(), '+=1') // delay by one second

Would this work? what's the string 'showText' for?

[Issue with drawing and following a path (syncing the two together using MorphSVGPlugin and DrawSVGPlugin)]

How are you generating your SVGs? The viewBox is messing with the dimensions, so your spot and path aren't proportional.

See the Pen qNyrRb?editors=0010 by osublake (@osublake) on CodePen

 

Just default Illustrator SVG export with styles inlined.

 

Maybe I'll try exporting the spot and line as part of the same SVG so the viewbox will effect both the same.

 

Appreciate a point in the right direction. Thanks for the example too.

[Issue with drawing and following a path (syncing the two together using MorphSVGPlugin and DrawSVGPlugin)]

I'm trying to make an element appear as if it's drawing a path as you scroll down the page.

 

I have it mostly working fine, but the the object doing the following slowly drafts away from the intended path the further into the animation it gets. Unsure why this is. There's an additional problem where it completely misses the path data for the last "hump" too, you'll see what I mean towards the very end of the line (maybe this is related?)

 

To draw the path I'm revealing the line by animating a duplicate path with a white stroke above it. The pathDataToBezier function is fed the original path data though.

 

Open to alternative ways of doing it if I can't find a solution.

 

You may have to maximise the preview window to see it draw properly.

 

Thank you

See the Pen BzPPrk by anon (@anon) on CodePen