---
title: "Infinite scroll with Next.js, Framer Motion, and Supabase"
description: "The post presents a tutorial for displaying Supabase Launch Week tickets with infinite scrolling in a Next.js page instead of loading every ticket at once. It fetches an initial batch of 20 tickets in getServerSideProps, then listens for window scroll events with a 200-millisecond Lodash debounce and checks the ticket container’s bottom against the viewport height. When the container reaches the viewport, Supabase range queries retrieve successive 20-ticket pages using an offset, and the results are appended to the existing list. Framer Motion animates each ticket from opacity 0 and y 20 into place, with index-based delays intended to create a staggered appearance. The tutorial also sets an isLast state when a response is shorter than PAGE_COUNT so scrolling can stop after the available tickets are loaded."
---

# Infinite scroll with Next.js, Framer Motion, and Supabase

[Supabase](https://yomu.fyi/company/supabase) · fsansalvadore · Apr 4, 2023

**Type:** Tutorial

## Summary

The post presents a tutorial for displaying Supabase Launch Week tickets with infinite scrolling in a Next.js page instead of loading every ticket at once. It fetches an initial batch of 20 tickets in getServerSideProps, then listens for window scroll events with a 200-millisecond Lodash debounce and checks the ticket container’s bottom against the viewport height. When the container reaches the viewport, Supabase range queries retrieve successive 20-ticket pages using an offset, and the results are appended to the existing list. Framer Motion animates each ticket from opacity 0 and y 20 into place, with index-based delays intended to create a staggered appearance. The tutorial also sets an isLast state when a response is shorter than PAGE\_COUNT so scrolling can stop after the available tickets are loaded.

## Context

Loading all generated tickets in one request could take a while, so the page needs to load smaller subsets as the user scrolls. The post presents infinite scrolling as a way to reduce initial loading work and provide a continuous browsing experience without pagination.

## Approach / What changed

The implementation loads 20 tickets server-side, debounces scroll handling to 200 milliseconds, checks whether the list container reaches the viewport, and fetches subsequent pages with Supabase range queries based on an offset. Newly fetched tickets are appended to existing state, Framer Motion provides staggered entry animations, and an isLast flag is used to stop listening after a short response indicates the final page.

## Takeaways

- The initial ticket batch is fetched with getServerSideProps, ordered by createdAt descending, and limited to 20 records.
- Subsequent pages use Supabase’s range method with from and to indexes derived from the offset and PAGE\_COUNT values.
- Framer Motion transitions each ticket from opacity 0 and y 20, while delays based on item indexes stagger the animations.

**Tags:** [Performance](https://yomu.fyi/topic/performance), [TypeScript](https://yomu.fyi/topic/typescript)

- Source: [Supabase](https://supabase.com/blog/infinite-scroll-with-nextjs-framer-motion)
- Source URL: https://supabase.com/blog/infinite-scroll-with-nextjs-framer-motion
- Ingested by Yomu: 2026-08-29T01:16:51.722Z

[Read original post](https://supabase.com/blog/infinite-scroll-with-nextjs-framer-motion)