Proof of Concept: Frontity's Mars Theme with swipe

[David]

Hello there,

I want to post something I’ve been working on. I’ve created a Proof of Concept showing how to implement a swipeable post view in Frontity that allows users to swipe to the next or the previous post.

Currently it only works for those posts that belongs to the first page of the post archive, but I think it shouldn’t be difficult to change to allow more pages, or any other list such as categories, tags, etc.

We could write a tutorial to show how to implement this kind of stuff (that’s why I’m posting this here).

---

Demo: https://frontity-swipe.darerodz.now.sh
Repo: https://github.com/darerodz/frontity-swipe

Libraries used: react-spring and react-use-gesture.

PS: It looks better on mobile

[luisherranz]

Awesome

So the trick to make the browser bar in mobile disappear is just this?

position: i === prevIndex ? "relative" : "fixed"

If so, why do you switch to relative when i === prevIndex instead of i === index?

And for the drag… why not using something like this to match more closely the actual movement of the finger? https://codesandbox.io/s/v364z

[David]

@luisherranz

If so, why do you switch to relative when i === prevIndex instead of i === index ?

That is for not having to change the positions before launching the animation. index changes as soon as state.router.link does and that happens in the middle of a swipe gesture. So, I’m waiting for that animation to finish and then update prevIndex to index. If you make the current index to be relative, then you lost the scroll position in the prevIndex and, as that would happend in the middle of an animation, you would see the previous post jumping to its top.

The same effect could be achieved with only index but storing the scroll position of the previous post and translating the post instantly to that position (before animating it).

@luisherranz

And for the drag… why not using something like this to match more closely the actual movement of the finger? https://codesandbox.io/s/v364z

Yup, it could be implemented that way. No problem at all.

[luisherranz]

Awesome, thanks @David.

Could you please update https://github.com/DAreRodz/frontity-swipe/blob/master/packages/mars-theme/src/components/viewpager.js with detailed, step by step comments, so everyone looking at this (including me) understand better the steps involved to make this work?

@David

Yup, it could be implemented that way. No problem at all.

Nice! So it looks like implementing a posts swipe like the one we had in the old framework is going to be possible after all

Would you mind giving it a go to the follow-the-finger drag?

Apart from that, what do you think about abstracting this in a component that accepts the array of posts and the Post component? Do you think it’s possible?

[David]

@luisherranz

Could you please update https://github.com/DAreRodz/frontity-swipe/blob/master/packages/mars-theme/src/components/viewpager.js with detailed, step by step comments, so everyone looking at this (including me) understand better the steps involved to make this work?

Sure, just give me a couple of days, I’ll let you know when I’ve done it.

@luisherranz

Would you mind giving it a go to the follow-the-finger drag?

Same for this, hehe.

@luisherranz

what do you think about abstracting this in a component that accepts the array of posts and the Post component? Do you think it’s possible?

I’m pretty sure it’s possible, I could try to do so in the example as well.

[luisherranz]

Thanks @David!

[David]

I added some comments to the repo, if you want to take a look. The other things are still pending!

[luisherranz]

Hey @david, thanks for that!

It’d be great if you share here a high-level overview of what files you modified to make this work. Right now when you open the repository it’s not clear to me what files you should be looking at.

I asked @orballo, who is currently working on an infinite scroll hook to take a look at this, to see if we could create a similar hook for the swipes.