# TikTok-style Swiping Feed 📱👆

**URL:** https://community.glideapps.com/t/tiktok-style-swiping-feed/81444
**Category:** Ask for Help
**Tags:** ai, ai-custom
**Created:** [April 20, 2025, 11:46am UTC](https://community.glideapps.com/t/tiktok-style-swiping-feed/81444 "2025-04-20T11:46:47Z")
**Posts on this page:** 16
**Page:** 1

<div class="post-metadata">

### Author: ![fk1214](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fk1214/32/71058_2.png) [@fk1214](https://community.glideapps.com/u/fk1214)
#### Post date: [April 20, 2025, 11:46am UTC](https://community.glideapps.com/t/tiktok-style-swiping-feed/81444/1 "2025-04-20T11:46:47Z")

</div>

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

* * *

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? 🤔

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 😅

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 😄

![copy_B62A8D2E-30F8-403C-AC1A-373593E44AF9](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/6/869e35a63e9dfcf9680308b3c48e7d2e287db710.gif)

> [@Introducing: Swipe Cards Collection (AI Component + JSON)](https://community.glideapps.com/t/introducing-swipe-cards-collection-ai-component-json/80802):
>
> A new way to show data new_buttonHello Fellow Gliders playground_slide I’m excited to share a versatile Swipe Cards Collection I created using an AI Component and JSON. Though it might remind you of Tinder, its applications are extensive. This post will show you what it does and guide you through the implementation. First, here is the baby [1000014763] Fine-tuning You can change anything you want in it by asking the AI to make so changes. Remember that the AI in the Glide AI Component do…

---

<div class="post-metadata">

### Author: ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)
#### Post date: [April 20, 2025, 12:43pm UTC](https://community.glideapps.com/t/tiktok-style-swiping-feed/81444/2 "2025-04-20T12:43:37Z")

</div>

Hey I appreciate your compliments! 🤩

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.

---

<div class="post-metadata">

### Author: ![fk1214](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fk1214/32/71058_2.png) [@fk1214](https://community.glideapps.com/u/fk1214)
#### Post date: [April 20, 2025, 12:44pm UTC](https://community.glideapps.com/t/tiktok-style-swiping-feed/81444/3 "2025-04-20T12:44:21Z")

</div>

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

> [@fk1214](#):
>
> First, the feed feels a bit off, kinda different from TikTok, not sure how to explain but see the GIF for what I mean 😅
> 
> And a bigger second problem I have is when users try to swipe on the feed, the entire page scrolls as well!

---

<div class="post-metadata">

### Author: ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)
#### Post date: [April 20, 2025, 12:46pm UTC](https://community.glideapps.com/t/tiktok-style-swiping-feed/81444/4 "2025-04-20T12:46:32Z")

</div>

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

---

<div class="post-metadata">

### Author: ![fk1214](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fk1214/32/71058_2.png) [@fk1214](https://community.glideapps.com/u/fk1214)
#### Post date: [April 20, 2025, 12:49pm UTC](https://community.glideapps.com/t/tiktok-style-swiping-feed/81444/5 "2025-04-20T12:49:19Z")

</div>

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? 🤔 (It’ll just be photos with captions or caption only posts for now 😅)

---

<div class="post-metadata">

### Author: ![fk1214](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fk1214/32/71058_2.png) [@fk1214](https://community.glideapps.com/u/fk1214)
#### Post date: [April 20, 2025, 3:52pm UTC](https://community.glideapps.com/t/tiktok-style-swiping-feed/81444/6 "2025-04-20T15:52:40Z")

</div>

@MaximeBaker Hey, you got a solution for this? 😄

---

<div class="post-metadata">

### Author: ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)
#### Post date: [April 20, 2025, 6:56pm UTC](https://community.glideapps.com/t/tiktok-style-swiping-feed/81444/7 "2025-04-20T18:56:00Z")

</div>

You mean this ?

> **[Invisible Button - Glide custom component](https://components.glide.info/share/commit::9a01bf2b-e30d-688b-ccee-3634ce67c275)**
>
> Custom component created in Glide

---

<div class="post-metadata">

### Author: ![fk1214](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fk1214/32/71058_2.png) [@fk1214](https://community.glideapps.com/u/fk1214)
#### Post date: [April 21, 2025, 6:50am UTC](https://community.glideapps.com/t/tiktok-style-swiping-feed/81444/8 "2025-04-21T06:50:40Z")

</div>

That’s almost it 😊 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? 🤔 Thank you 🙂

---

<div class="post-metadata">

### Author: ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)
#### Post date: [April 21, 2025, 11:57am UTC](https://community.glideapps.com/t/tiktok-style-swiping-feed/81444/10 "2025-04-21T11:57:36Z")

</div>

Ask it to take 100% of the viewport height.

---

<div class="post-metadata">

### Author: ![Ashton\_Pelzel](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ashton_pelzel/32/78156_2.png) [@Ashton\_Pelzel](https://community.glideapps.com/u/Ashton_Pelzel)
#### Post date: [April 22, 2025, 7:57pm UTC](https://community.glideapps.com/t/tiktok-style-swiping-feed/81444/11 "2025-04-22T19:57:37Z")

</div>

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

---

<div class="post-metadata">

### Author: ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)
#### Post date: [April 22, 2025, 8:31pm UTC](https://community.glideapps.com/t/tiktok-style-swiping-feed/81444/12 "2025-04-22T20:31:32Z")

</div>

> [@Ashton\_Pelzel](#):
>
> How do you get this?

I am just a wizard!

> [@Ashton\_Pelzel](#):
>
> Is there a link to copy the JSON code and do the same thing??

Yes, of course! [Invisible Button - Glide custom component](https://components.glide.info/share/commit::9a01bf2b-e30d-688b-ccee-3634ce67c275)

---

<div class="post-metadata">

### Author: ![fk1214](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fk1214/32/71058_2.png) [@fk1214](https://community.glideapps.com/u/fk1214)
#### Post date: [April 23, 2025, 11:31am UTC](https://community.glideapps.com/t/tiktok-style-swiping-feed/81444/13 "2025-04-23T11:31:38Z")

</div>

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 🙂

> [@Introducing: Swipe Cards Collection (AI Component + JSON)](https://community.glideapps.com/t/introducing-swipe-cards-collection-ai-component-json/80802):
>
> A new way to show data new_buttonHello Fellow Gliders playground_slide I’m excited to share a versatile Swipe Cards Collection I created using an AI Component and JSON. Though it might remind you of Tinder, its applications are extensive. This post will show you what it does and guide you through the implementation. First, here is the baby [1000014763] Fine-tuning You can change anything you want in it by asking the AI to make so changes. Remember that the AI in the Glide AI Component do…

---

<div class="post-metadata">

### Author: ![fk1214](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fk1214/32/71058_2.png) [@fk1214](https://community.glideapps.com/u/fk1214)
#### Post date: [April 23, 2025, 11:52am UTC](https://community.glideapps.com/t/tiktok-style-swiping-feed/81444/14 "2025-04-23T11:52:06Z")

</div>

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

---

<div class="post-metadata">

### Author: ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)
#### Post date: [April 23, 2025, 12:12pm UTC](https://community.glideapps.com/t/tiktok-style-swiping-feed/81444/15 "2025-04-23T12:12:27Z")

</div>

Sorry what ?

---

<div class="post-metadata">

### Author: ![Ashton\_Pelzel](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ashton_pelzel/32/78156_2.png) [@Ashton\_Pelzel](https://community.glideapps.com/u/Ashton_Pelzel)
#### Post date: [April 23, 2025, 2:32pm UTC](https://community.glideapps.com/t/tiktok-style-swiping-feed/81444/16 "2025-04-23T14:32:31Z")

</div>

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

---

<div class="post-metadata">

### Author: ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)
#### Post date: [April 23, 2025, 4:34pm UTC](https://community.glideapps.com/t/tiktok-style-swiping-feed/81444/17 "2025-04-23T16:34:23Z")

</div>

Anytime!
