I am a know nothing and am looking for help or direction to accomplish the following.
Need to control playback of the animation based on an anchor in the web page.
When the anchor comes into the browser viewport, it would trigger play, pause or stop.
to control the flow/direction of the animation playback based on scroll direction.
I would like to have the playback direction for Edge animations placed in a web page, to follow the web Surfer's scrolling direction.
Scrolling down or right, Animation plays forward.
Scrolling up or left, Animation direction plays backwards,
But, that's not all ... I would like to combine the scroll direction sync with ... Anchors
Image if you will:
Multiple Edge animations are placed at various positions on a web page.
Autoplay for each is turned off.
Wish to individually control the playback functions for each animation. - Start - Stop - Pause.
Wish to trigger their playback relative to when an associated anchor (becomes visible / invisible) is inside or outside, of the browser view port.
I put up a web page diagram to illustrate the functions.
Help would be greatly appreciated, thank you
Found a discussion that provides an example of controlling Edge animation playback direction with browser scroll bar.
And YOSHIOKA Ume provided an excallent example:
Now how to take that and combine it with control playback Start, Stop, Pause by when an anchor becomes visible and invisible in the browser's viewport?