Sticky Scroll Effect

1

20181010-azc6o
20181010-azc6o1823×1079 88.8 KB

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. and offers a scroll driven timeline progression.

Technical mumbo jumbo:

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
v4.1 added horizontal version
v4.2 fixed mobile display

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

Preview Vertical version:
fullScreenFrameScroller-pureJS-v4_2.html

Preview Horizontal version:
fullScreenFrameScroller-pureJS-horizontal-v4_2.html

Download:

11 Likes
2

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

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°

See http://portal.facebook.com
Update: has been relaunched so the effect isn’t there anymore!

1 Like
4

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

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.

6

Thank you!

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

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:

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.

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.

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

11

really cool! you’re the man!

1 Like
12

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

1 Like
13

Max - Would this work as a side scrolling Hype project?
I’m at the early stages of an audio trail for an arts project - previously I’ve used different screens for different parts of the project but I like the idea of being able to side scroll through them - what do you think ?

14

Not out of the box as it’s linked to the vertical scroll. It could be refactored. Haven’t looked at it in ages :nerd_face: … it uses position sticky (CSS) and there are some general minor issues with that when used horizontal also it does all the calucations from scrollTop and hypeDocY. You can try to refactor is to X and left based values, I guess.

15

Here you go! Only quickly tested in the horizontal version but seams to work.

Preview Vertical version (the old version from above reposted with minimal tweak):
fullScreenFrameScroller-pureJS-v4_2.html

Preview Horizontal version (new one, quick test only):
fullScreenFrameScroller-pureJS-horizontal-v4_2.html

Download:

2 Likes
16

Just saw that I need to adjust video auto play in the demo and the size of the Cover for mobile.

Update: v4.2 fixes mobile playback and display of the demo content. Not that this is necessary as it was not really a bug but it looks better.

17

I recently started experimenting with this and I love it! One question I have is if I am scrolling and click a button to a new scene with a new timeline, how would the scroll progress refresh at the top position again so the new timeline scroll progress is not mid page? Thanks so much!

18

This was developed as a widget at the time to be embedded into WordPress or another CMS, not as a multi scene solution. If you want to use it that way, you would need to reset the scroll on scene loads:

window.scrollTo({ 
      top: 0, 
      left: 0,
      behavior: 'instant'
  });
1 Like
19

That works... Thank You!!!