Longtime I didn’t contribute much but I thought I’d share some code I wipped up as a example for a project I am working on. It’s much like waypoints but works across multiple Hype-Instances on a page. The example only uses only one Hype-Animations but is intended for mixed HTML/CMS-content and multiple Hype-Animations across the page.
The example forwards the events to the Hype-Animation and those then can be used inside the animation as needed. Check out the init-Function (on sceneload) to see the setup. One gets enter, exit and progress updates. This example just initially pauses the timeline and then plays it in either direction on enter and exit event but obviously one can do much more.
Check out the Scrollama-Project this is based on:
Furthermore the example has the debug-mode and progress enabled (example.html):
step: '.scroll__text .hypelama',
To enable an animation to be tracked add the class “hypelama” to it:
<div class="hypelama" id="hypelama_hype_container" …
Download the example here:
Hypelama.zip (125,0 KB)
@DBear Now updated with Polyfill for IntersectionObserver