Add a trigger and delay options

[Connor Atherton]

Currently, all animations are scheduled to execute as soon as possible. It would be better to have more control over when an animation should start.

[Jordan]

I'm not sure if this may be beyond the scope of the library, really all you'd have to do is use your svg class as a callback for a delay or an event.

setTimeout( mySvg.draw, 4000 ); // draw after 4s

document.addEventListener( 'scroll', mySvg.draw ); // draw on scroll

Actually -- it looks like this isn't working as expected, going to debug to see what's happening

[Connor Atherton]

@wjramos That would be the simplest and easiest option to get started.

I think my intention with this feature was to be able to add a slight animation delay for each individual element in the SVG. I think subtle offsets in the finishing times for different lines, for example, works well with this effect.

Regarding the trigger, I thought it would be nice to instantiate a Walkway object and mark it as dormant, meaning it won't animate right away (usually on DOMContentLoaded), and manually trigger it when another page event fires.

Here is some pseudo-code of my thoughts here

# When the scroll offset it close to my element
whenScrolledTo('.myElement', e => walkwayObject.trigger())

What do you think?

[Jordan]

Can it use window.onload instead of DOMContentLoaded? It'd let you store the object earlier and make it available sooner. (That is under the assumption that an inline svg is available as it's markup is parsed -- I am actually not totally sure about that)

I do think that makes sense, I've seen in other animation libraries the ability to initiate lines asynchronously, or using a bezier curve like ease-in, ect.

[Connor Atherton]

I don't think this change should be made to the animation library itself, but rather controlled by events added to the draw method you mentioned above. Closing this now, thanks for your input.