Starting a page flow when a section becomes visible upon scroll?

Wappler General Need Help
1

Hey everyone I have a site where i am scrolling down a single page and I have a few sections. I want page flows to trigger when a user scrolls into a new section for triggering animations and such.

Is there some easy way of doing this with pre-existing wappler components, I’ve tried a few different things so far without any luck. The best I’ve come up with is using the mouse entered attribute on a section to trigger the flow, but that fails if the user is using the scrollbar or keys and the mouse doesn’t enter the section. Appreciate any advice anyone has to give.
Thanks

3

Hi. There are already animations for in-view, out-view etc in Wappler dynamic properties. See of that helps.
If that doesn’t work or isn’t enough, I would have used JS to bind to scroll event and invoke the flow using dmx.parse.

4

Not to be a pain, but do you have a very simple example of how to trigger a flow using JS when it comes into view? This would be so useful for a lot of what I’m attempting but JS is definitely not my strong suit.

This seems like it would make an excellent Wappler feature, maybe I should put in a feature request?

5

I don’t have any exact example unfortunately. Maybe this will help:

  1. JavaScript Scroll Events, Event Throttling & Passive Events
  2. Refer above link to set a scroll event binding.
  3. Inside the event, identify if the element is in view - javascript - How to check if element is visible after scrolling? - Stack Overflow
  4. If yes, then invoke page flow: dmx.parse('flow1.run') or dmx.parse('content.flow1.run')

Not sure if it would be a good fit given the way AppConnect works, but no harm creating a feature request. :slight_smile: