Scroll - as a event
closed
L
LarsG
Make a scroll container have a scroll event. On scrolling ( mouse scroll wheel or touch input ) inside a scroll container, move this or resize this or change this - in my case move my app menu out of frame. Ex. safari browser bar at the bottom of the page, on scrolling down it disappears.
EDIT: Detection of scroll direction and hooking a animation to each direction individually.
Patricia (ProtoPie Team)
closed
It's already possible to trigger animations based on scroll values, e.g: https://www.protopie.io/blog/create-a-sticky-header-using-formula
B
Bertrand Berlureau
Patricia (ProtoPie Team): Merry Christmas :)
Darren Bennett
Here’s a tut of how to do this https://youtu.be/RcFJqRRMwfY
J
Jisoo Kim
Darren Bennett: If anyone's wondering about scroll-away sticky header trick, this one does the magic! Thx Darren :)
Ophelia Gordon
I’ve also been looking for this for last few hours. I found an old tutorial video that shows this pattern being created in an old version of Protopie
Imagination Digital Team
I've been searching all over for this too! It seems like it shouldn't be sooo difficult to have nice parallax & animations on vertical scrolling since it's such a common pattern around the web.
Will Dawson
also variables for how far scroll in this scroll (per direction), resets after each pause in scroll
Oludare Oni
thanks alot this is very cool info.
C
Claudio Pascariello
Thanks for sharing all. These are awesome examples
Hiroyuki Miura
Inspired by Taeyoon Lee, I wrote a pie which automatically hide and show header based on scroll direction.
My pie can ignore Apple's "bounce scroll" which mixes up the scroll direction. Feel free to copy. I think the same trick should work with JS.
T
Taeyoon Lee
Hiroyuki Miura: Great work! However, you can debug variable with ‘bug shaped button’ at variable list
Hiroyuki Miura
Taeyoon Lee: Damn. Thanks for letting me know!! I’ll use it next time.
이태윤
Actually We can detect Scroll by Detect and Assign. Also direction can be detect by some complicated Detect-Assign combo. It means, we really need Scroll Detection Trigger to the point where using this complicated method.
Konstantinos Partheniadis
이태윤: Can you share with us how do you detect the direction of scroll?
T
Taeyoon Lee
Konstantinos Partheniadis:
HAHA I accidentally commented with company account. I made it like this.
First, using Detect trigger and Assign response to assign scroll position of container which you want to detect direction of scroll to 'Scroll_Detect' variable. You can put together with second.
Second, using Detect trigger to response when Scroll Event has been happen. At this time, I detected 'Scroll_Detect' to debug easily. You can detect actual scroll position also. And then, assign 'Scroll_Detect' to 'Scroll_StartPositon' variable. After 0.01s of delay, assign 'Scroll_Detect' to 'Scroll_Present' variable. Because of 0.01s of delay, you can detect the scroll direction of container via compare these 'Scroll_StartPosition' and 'Scroll_Present' var.
Third, use Condition response to detect direction.
> if ['Scroll_StartPosition' > 'Scroll_Present'] condition holds, it means now user scrolling up. So, Assign "Scroll Up" text(or whatever you want)to 'Scroll_Direction' variable.
> if ['Scroll_StartPosition' < 'Scroll_Present'] condition holds, it means now user scrolling down. So, Assign "Scroll Down" text(or whatever you want)to 'Scroll_Direction' variable.
> We also need to know when scroll has been stopped. Detect 'Scroll_Direction' to ready for check scroll state(I mean scroll or not). Condition ['Scroll_Direction' ≠ "None"],
and after 0.2s(more than we used in second!), assign "None" to 'Scroll_Direction'.
Here's my cloud link also :
Victor Tolosa
Taeyoon Lee: Thanks for explaining how you achieved this. Super helpful and I agree this functionality needs to be baked into the software.
D
Daniel Schultheiß
Taeyoon Lee: You can use $touchVelocityY for detecting if a user scrolls up or down. If the value is negative, the user scrolls down - if its positive the user scrolls up