Framer inspired Scroll Effect (Hype 3)

(Loves Hype) #1

Inspired by the page. 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.

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.

Version Pure-JS

V1 initial release
V2 fixed iOS and resize bugs, added hideIfOffScreen
V3 added hideUsingDisplayNone, added onScreenState callback
V4 added native position:sticky support if the browser supports it

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


Scroll through scenes like a one page website
(Loves Hype) #2

↑ look at downloads
Pure-JS V2 fixed iOS and resize bugs, added hideIfOffScreen

(Loves Hype) #3

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°


(Loves Hype) #4

↑ look at downloads
Pure-JS V3 added hideUsingDisplayNone, added onScreenState callback

(Freelancer) #5

nice work @MaxZieb very interesting!!
I worked on similar solutions but with less code, your project inspire me!
Looking forward for your next test.

the only negative thing in this type of projects (even mine) is that it is not possible to have a correct preview in Hype; this is a limit for non-experts, unfortunately.

(Loves Hype) #6

Thank you!

What do you mean with correct preview? Because it is a widget for a HTML-Page/CMS/WordPress?

(Freelancer) #7

I mean the working area in Hype, you can see the result only in browser ( or through the IOS simulator); this always happens if you use custom :frowning:

(Loves Hype) #8

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.

(Freelancer) #9

it was just a thought; I refer to the management of files by user that have no skills, just that. This is the same with some of my project.

(Loves Hype) #10

My thoughts on Skills and Hype can be found here. If you want to discuss it further let’s do it there…

Much appreciated

(Hans-Gerd Claßen) #11

really cool! you’re the man!

(Loves Hype) #12

↑ look at downloads
V4 added native position:sticky support if the browser supports it