It should be used as a widget on a page built with regular HTML, Blog or CMS. It tries to take care of margins and fixed position etc. and offers a scroll driven timeline progression.
Technical mumbo jumbo:
This started in the Beta-Forum so now I converted it to Hype 3 and added a bunch of settings. This could also be optimized with external code and intersection observer and the CSS sticky position. But these would both require a polyfill and in this way I also used it to experiment with vanilla JS. Currently only usable with full height containers. Still untested with WordPress upload or real HTML wrapper. So still work in Progress.
V1initial release V2 fixed iOS and resize bugs, added hideIfOffScreen V3added hideUsingDisplayNone, added onScreenState callback V4added native position:sticky support if the browser supports it v4.1added horizontal version v4.2fixed mobile display
Parameters in document:
scrollDistanceHeight sets your scroll height (distance you want the user to scroll) scrollProgressOffset sets the offset that triggers progress renderScrollProgressToBody sets classes (about Sticky-Status) and progress on body for external CSS rules onScrollProgress callback that receives 0-1 as progress parameter so you can act on it (playhead etc.). hideIfOffScreen setting to hide the container if off screen (still not sure if display:none or visibility:hidden is better for this). Currently using visibility (but display none is commented in code to try). hideUsingDisplayNone setting that uses display:none over visibility:hidden (default), only applies if hideIfOffScreen is true onScreenState callback that receives a number from -2 to 2 indicating the state including before/after, onScreen/offScreen and stuck
Little sidenote on this “project”. Just saw the newly launched portal page from Facebook uses a similar effect (btw does this effect have a specific name?) that would be doable with this code and Hype. That should be easy now! Nice°
Now I understand what you mean. But the animation can be viewed in Hype as regular… scrubbing the playhead, playing with spacebar. If it's only a timeline that is hooked to scroll (in this example) and then the only difference is that after publishing it is reactive to the user scrolling. It only gets dependent on the preview if you use the callbacks onScreenState or use more complex triggers in onScrollProgress. But I personally always preview my animations in the browser and not in Hype. But it would be a nice feature request to have a live preview tab like in the first FrontPage back in the days (mid 90'ties). Then again I use the preview function just like that as previewing nested symbols in Hype doesn't trigger parent timelines etc. and makes previewing in the browser mostly unavoidable.
Max - Would this work as a side scrolling Hype project?
I’m at the early stages of an audio trail for an arts project - previously I’ve used different screens for different parts of the project but I like the idea of being able to side scroll through them - what do you think ?
Not out of the box as it’s linked to the vertical scroll. It could be refactored. Haven’t looked at it in ages … it uses position sticky (CSS) and there are some general minor issues with that when used horizontal also it does all the calucations from scrollTop and hypeDocY. You can try to refactor is to X and left based values, I guess.
I recently started experimenting with this and I love it! One question I have is if I am scrolling and click a button to a new scene with a new timeline, how would the scroll progress refresh at the top position again so the new timeline scroll progress is not mid page? Thanks so much!
This was developed as a widget at the time to be embedded into WordPress or another CMS, not as a multi scene solution. If you want to use it that way, you would need to reset the scroll on scene loads: