Framer Scroll Effect

12/01/2018 - ⇨ 

  Live Preview
4.1/519 ratings

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 )

Template by: MAX ZIEBELL

A new version of "Fluid Columns Kit" @hypeapp template is available (thanks @MaxZiebell ). Optimized and refreshed for furthers 1000 downloads!

Featured Work: 'Masters of the Sun' is an exciting comic book where each page is built as a Hype animation 💭
Music by the Black Eyed Peas & Hans Zimmer with voice over by beautiful famous people you know (like Stan Lee & @SnoopDogg)

Load More...

Templates by category