Scroll changes panel state, then scroll

#1

Hi all,

I’m having an issue.
I have a dynamic panel with several states in it, each state is a step in a story that should be told by scrolling. For each scroll action I’d like the panel to change to the next one.
Here are my questions / problems :

  • On its first states my panel takes all 100% page height and thus there is no scroll. So the “On windows scroll” cannot be triggered. So I cannot use the “Page Scrolled down” to trigger the panel state change.
  • The last panel contains the last step of the storytelling then there is scroll to know more about the product, so I’d like this last state to be scrollable.

How can I have this scrollytelling effect and be able to continue scrolling on normal text / image content after the animation ? (I used a dynamic panel, but I’m open to any other suggestion).

Here is the dynamic panel :
3 steps then scroll.rp (132.9 KB)

Thanks a lot :slight_smile:

David

#2

The solution is to add content such that it is taller than the window height, or at least content within each state taller than the dynamic panel’s viewport, thus allowing a Scrolled event to be triggered. I think it would be easier and more reliable to add content within the dynamic panel and use that panel’s Scrolled Down event than to use the Page Scrolled Down event, especially as your panel is full screen size. You will also need to ensure the “Scrollbars” option of the dynamic panel is not set to the default “Never Scroll” or the panel will never scroll.

In the updated file below, I demonstrate this by adding a hotspot (an invisible widget) below your screen height of 568 px, in all but the last state. I also show a way to hide the panel’s scrollbar by increasing its width enough to place the scrollbar out of the screen area, then wrapping the dynamic panel in an outer dynamic panel set to the screen area size, and unchecking “Fit to Content” option. I found the scrolling works better if you specify a width for the PAGE DIMENSIONS, thus using the new mobile prototype viewer when viewed in a desktop browser.

3 steps then scroll.rp (318.0 KB)

#3

Thank you

mbc66, it works perfectly !

I have a question for you after reading your answer, how do specify that you’d like to use the “mobile prototype viewer” and have this finger-like cursor instead of the mouse cursor ?

I’ve opened all the menus and options and I don’t see that anywhere…
Thank you again :slight_smile:

#4

Well, I had thought it was used any time you specify page dimensions, and honestly I didn’t know it was possible to only specify one dimension (width only.) So I guess the rule is if you specify page width and height then the mobile prototype viewer will be employed in the HTML.

#5

https://drive.google.com/file/d/1K9aoyE4tZw_5lq3wE1I8SGWUKv6uDnpC/view?usp=sharing

Hi David,

I have a similar kind of problem. I wanted to change the slides (back and fro) through mouse wheel up and down

I had shared the file through google drive. Can you help me