Workflow triggered based on scroll position

Suggestion to add a workflow trigger based on the scroll position. This would be great for example for animations. When the user scrolls down elements appear in a certain order with animated effects.
Right now the scroll position trigger can be used only to hide/show elements or to change their properties but not for animations.

Edit: Just noticed that there is such a criteria but only as an “and” operator not as a stand alone trigger. And actually it doesn’t seem to work when I use it together with “when the page is loaded” trigger.

4 Likes

Yes, I recommend using this as a condition on an element, not a workflow. You can say ‘when the page scroll is 1000’, make the element visible with a condition on it.

2 Likes

yes, but in that case I can’t make it fade in or fade out or apply any other animation effect based on the scroll position. And nowadays on many landing pages you can see elements appearing in a pretty way when you reach a certain scrolling position.

1 Like

Yes, that’s indeed a limit we have right now. We’ll look at animation for conditional formatting, but prob not at the second.

2 Likes

something like this would be awesome!

+1 for this new trigger run only once.

A/ With current page scrolling position, it gives this effect :
Scoll down -> elements appear. Fine
Scroll up -> they disappear again. Weird.

B/ Without workflow, it’s not possible to use Element > Animate

not a big deal but a bit pity.

2 Likes

Hey @emmanuel. When you look at beautiful designed websites, animations are so important to get users attention. Nice to have animations in general but on scroll would be so great!

3 Likes

Go into your workflow and set it to trigger ‘Only When the Current Scroll Position is > y’ (‘y’ being the Y value of the element you want to animate) and then tell it to animate the element. Make sure the element isn’t visible on page load for the animation to activate properly, and set the workflow to repeat ‘Just once’.
Know its late but hope this helps! :blush:

2 Likes

Thanks, @dylanwares, how do you define the y value of the element? I can’t figure out how to define that term

@ccc262 You’ve probably already figured this out, but it’s in pixels. So for example, if you want something to appear once you’ve scroll down past a large hero banner, you input the height of the banner and it will show up.

To add to @dylanwares’s answer too: If you want to toggle an animation based on scroll position, for example, to have an element appear when the user scrolls down to some point and then disappear again if she scrolls back up, then here’s what I’ve found:

Instead of using “Just once” events in your workflow, use “do every 5 seconds” events. You can change the frequency for the events once you create them (for example to every second) and then condition them on the page scroll position and the visibilty of the element. The workflow will then evaluate the condition given in the background every second, and when the condition is met the animation is triggers. (In case it isn’t clear, you have one event to make the element FadeIn, and then another to make it FadeOut.)

2 Likes

The absolute height, meaning the hero banner + every height of elements on top of it (ie a header)