Changing the state of a dynamic panel incrementally on scroll?

Hi all! I have a dynamic panel pinned to my page with a number of different states. Think of each state like a panel from an animation. I’m trying to simulate a ‘scrollytelling’ experience, where it progresses to the next animation panel as the user scrolls down.

Thing is, I’m having trouble determining how to do that elegantly. Currently I just have a case for each panel. I.E. “if window.scrolly is greater or equals 50”, “if window.scrolly is greater or equals 100.” But that’s really inefficient and makes it a paint to edit. Is there a way to set the condition to progress to the next state incrementally? For example, something essentially saying “every time window.scrolly goes up by 50, do this thing.”

The only way I can think of is to leverage the “Value” option of the set panel state. This would require you to name your panel states something that could derived by equation. Here’s a sample -

So basically each state is named 1, 2, 3, 4, 5, etc. Two events drive this:

  1. on window resize, set the size of a widget to the window height + 1000 (for my example I have 20 states, and based your request of every 50 pixels I need 1000 pixels of scrolling). This ensures no matter what the window height is, I will always be able to scroll for 20 panels, even if the window is resized.

  2. On window scroll, set the panel state to value [[Math.floor(Window.scrollY/50)]]

See attached… sorry it’s not a very exciting scrollytelling experience :slight_smile:

scrollytelling.rp (65.7 KB)

Sweet! Thanks so much! This will be hugely helpful.