Framer Scroll Effect

12/01/2018 - ⇨ 

  Live Preview
4/510 ratings
105 Downloads


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 )

Tempalte by: MAX ZIEB

New templates for 2019: iOS 12 and Android P GUI Kits for your prototyping needs: https://t.co/IzZcBIMeU8

2

This mockup simulator by @a_michelangelo lets you convert a 2d shape into a 3D box, with controls and toggles built in Hype: https://t.co/wX5QVfRGoR

Load More...

Templates by category

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

Close