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

I would like to create a long page that when a person scrolls up or down, elements i.e. text, pictures, etc., will animate from off the stage on to the stage. Much like the animation features for elements in premium Wordpress themes. Is there a simple code snippet that is available for this action?

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

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.