Framer Scroll Effect

12/01/2018 - ⇨ 



  Live Preview

5/51 rating


Framer Scroll Effect


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 )

Today only, grab a Cyber Monday deal to get the most powerful HTML5 creation tool at 20% off:
Prefer the Mac App Store? -->

Load More...

Most appreciated publications

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this. Read the COOKYES POLICY