How should I approach creating an app demo similar to Venmo's?

Question

I'm trying to recreate a demo similar to Venmo's here https://venmo.com/about/product/ .

My current approaches are:

1. Scroll Event Listener - Add an event listener for scrolling and scan an area of document by absolute position for a list of elements and update state based on the div's key/id/class. Pros: a single event listener, Cons: having to parse through list of elements to find key/id/class, possibly unreliable?

2. Position Event Listeners - Add event listeners on each div/card and update state when element position passes conditions. Pros: possibly simpler to implement, Cons: multiple event listeners

Which of these would be the better approach, is there something I'm not thinking of?

Answer 1

Those are actually two good thoughts. Venmo's demo uses an HTML5 video that is controlled by the scrolling.

I believe you could probably do it simply by following an approach as suggested in this article .

The gist of the explanation is that you initially set the height of the scrolling element to correspond to the length of the video and use that as part of your calculation in the scrolling. I would not worry about trying to orient yourself based on the elements on the page, but instead place the elements in the appropriate spots after you have adjusted the scrolling to your liking.