I’m going to attempt to create a scroll animation like the following examples with Bubble. Has anyone tried something like this before? If you have I would love to get your thoughts on structure.
Never tried it, but it’s possible.
Have a custom state number for which “slide #” to be showing. Then add a workflow event for when a condition is true and run it every time. The event condition should be when current page scrolling position is not 1.
The first action would be if current page scrolling position is 0, then that means the user is trying to scroll up, so change the custom state slide # -1.
The second action is if the current page scrolling position is > 1, change the state to slide # + 1. (you can also add show/hide animations to this to make it look smooth)
The final event which doesn’t have a condition should be scroll to an element that has a y-value of 1. This will reset the scrolling position to 1. Also you need to scroll to the y-value of 1 on page load.
A couple of problems with that method.
-
There will be a scroll bar present, but you can remove this with some simple css or javascript.
-
If a user scrolls a mouse wheel they may trigger the workflow several times. To prevent this, set a yes/no state to yes that we’ll call JustScrolled y/n, as well as have that workflow trigger a custom event. On that custom event should be a conditional for if JustScrolled y/n is not yes. In the custom event put all the events as described above as well as a workflow pause for ~ 400ms and an event to change JustScrolled y/n back to no. This will prevent the custom event from be ran more than once every 400ms.
Another option is to use JavaScript to detect when a user is scrolling. But I believe this method will work (didn’t test it)
Let me know if you have any questions.
Oh I didn’t check the second link. The second link definitely will require CSS/JavaScript
Thanks Tim. I’m looking more at the first design. I’ll share when complete.