Framer Scroll Effect

Description:

A reusable Hype Symbol that give you a custom video controller for videos on any scene.

Technical mumbojumbo:

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.

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

Version: 4.0.0 ( added native position:sticky support if the browser supports it )

Template by: MAX ZIEBELL