Hello everyone,
I came across this mobile website and was wondering if mobile gestures are achievable in webflow.
The mobile website used a “pull to refresh” motion to navigate between slides.
Any ideas or javascripts that i should be looking at for this interaction?
Thank you.
That’s not pull to refresh, it’s just a fullscreen vertical slider.
You can use any slider library to achieve this effect.
An example would be Swiper. It has a “vertical” direction parameter iDangero.us
Im aware that most slider libraries are able to do basic swipes.
It is the pull and release trigger that i am interested to know.
In the case of Swiper.js, it has a followFinger parameter, which if you set to false, does exactly what you described.
followFinger parameter
If disabled, then slider will be animated only when you release it, it will not move while you hold your finger on it
If you open up the link on your mobile, you are able to pull the page up/down and hold it there with your finger, upon releasing your finger, the page bounces back to position and transitions into another slide.
Basically, i want to recreate the “pull to refresh” motion. But instead of refreshing, it changes slide/page.
Here’s what I cooked up using the Swiper slider.
http://vertical-fullpage-slider.webflow.io
Is this clearer now?
Thank you for your mockup, but it is different from the mobile gesture i am trying to achieve.
here are the screenshots from the link i shared earlier, you can see that i am still able to hold and drag the page down, the slide transitions only after i release my finger.
I’m quite sure that’s only an Apple Safari thing. I don’t get that on Android Chrome - a swipe down just refreshes the page, while a swipe up moves to next slide.
You can see my swipes represented by the circles on the right side.
Yes so sorry about it. I have no idea it appeared differently on android.
On ios, a swipe drags the page, it moves to the next slide only when i release my finger.
any apple users able to comment?
Hi, does anyone know how to implement this mobile gesture in Webflow?
The problem is that (iOS) Safari does not have pull to refresh, while (Android) Chrome does.
You might need to disable PTR on devices that has this feature
→ javascript - How to prevent pull-down-to-refresh of mobile chrome - Stack Overflow
Then you need to implement overscroll behaviour
→ Take control of your scroll - customizing pull-to-refresh and overflow effects - Chrome Developers
Then have a full-height slider like the one I did
https://preview.webflow.com/preview/swipe?preview=63b7068055a66c111f960aaa4269e2b4
Please have a look at my mockup.
I have managed to set up the mobile gestures, but i have trouble setting up the trigger so that when you swipe in a certain direction, the page changes.
Thank you.
