Proof of Concept: Frontity's Mars Theme with swipe

Hello there, :wave:

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 :blush:

3 Likes

Awesome :clap:

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

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).

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

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?

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 :slight_smile:

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?

1 Like

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

Same for this, hehe.

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

Thanks @David!