TikTok-style Swiping Feed 📱👆

This request is mainly for @MaximeBaker because he’s the best with the AI component, but others can help to :rofl:


Do you guys know the best way to make a TikTok-style swiping feed with JSON and the AI component to swipe through video/photo/text posts in a feed? :thinking:

I’ve tried using the awesome Swipe Cards Collection and asked it to change it to tiktok-style but I’m getting two problems. First, the feed feels a bit off, kinda different from TikTok, not sure how to explain but see the GIF for what I mean :sweat_smile:

And a bigger second problem I have is when users try to swipe on the feed, the entire page scrolls as well! Any help is appreciated, thanks :grinning_face_with_smiling_eyes:

copy_B62A8D2E-30F8-403C-AC1A-373593E44AF9

1 Like

Hey I appreciate your compliments! :star_struck:

You could ask to use media instead of a simple image. That way, the AI component could detect if the provided URL is an image, a video, etc. And use the right output to show based on the type of the file.

If you provide file links that contains extension type at the end, it will be so much simpler for the AI component to know which type it is. Otherwise, you will need a media type detection in your AI component.

1 Like

That’s not really the problem though :rofl: These are the problems:

Maybe try to ask to do a vertical gallery instead of a Swiping feed.

When I copy your swipe cards collection component, where do I go from there to get that tiktok functionallity? Also, how do I fix my second problem too about when users try to swipe on the feed, the entire page scrolls as well? :thinking: (It’ll just be photos with captions or caption only posts for now :sweat_smile:)

@MaximeBaker Hey, you got a solution for this? :grinning_face_with_smiling_eyes:

You mean this ?

That’s almost it :blush: But do you know a way to lock the page scroll so when I try to swipe on mobile it doesn’t scroll the entire page? :thinking: Thank you :slightly_smiling_face:

1 Like

Ask it to take 100% of the viewport height.

How do you get this? Is there a link to copy the JSON code and do the same thing??

I am just a wizard!

Yes, of course! Invisible Button - Glide custom component

First you’ll have to set up your columns (do “JSON Configuration” steps in post below), then you copy the component, and ask the AI to fit the component to your JSON object structure for each post, and customise it as you like :slight_smile:

1 Like

That screws the component up and makes it keep getting longer and longer.

Sorry what ?

Oh, thank you, thank you, thank you!!

1 Like

Anytime!

1 Like