Animating off screen elements on screen when user scrolls up or down

[Daniel]

Here's a great post by @JimScott with a snippet of code:

Change image size when scrolling down

@Matus Hype project: scroll-SizeAdj_JHSv1.hype.zip (145.9 KB) As You scroll down the page the image shrinks - all sizing and positioning is done in the “Main Timeline” using Hype’s interface - easy for You to change to fit your needs without coding. Note: There is a JavaScript function (“controlTimeline”) that matches the vertical scroll position of the window to the Timeline. The only reason You would need to alter this JavaScript code would be if You had timeline other than the ‘Main Timeli…

The basic function is:

window.onscroll = function() {scrollTimelineSync()};
 
    function scrollTimelineSync() {
 
        whatScroll = (document.body.scrollTop || document.documentElement.scrollTop  )/ 36
         
        hypeDocument.goToTimeInTimelineNamed(whatScroll, 'Main Timeline');
        hypeDocument.triggerCustomBehaviorNamed('arrow-start')
        
    }

The '36' number is sort of a magic number that you should change based on how fast or slow the element should move based on the rate of scroll.