Scroll Resources Worth Bookmarking

Inspiration, tutorials, tools, and videos to help you create beautiful scroll-based experiences for modern websites.

As Seen On:

All

Parallax

3D

AI

Cards

Colorful

Dark

E-commerce

WebGL

Grid

Landing Page

Light

Microinteractions

Minimal

Portfolio

SaaS

Scroll Animation

⌘K

Discover Hatom – An Innovative, Non-custodial Ecosystem.

Hatom

Discover Hatom – An Innovative, Non-custodial Ecosystem.

External image

hatom.com

Visit Website

Discover Hatom – An Innovative, Non-custodial Ecosystem.

Hatom

Discover Hatom – An Innovative, Non-custodial Ecosystem.

External image

hatom.com

Visit Website

Our mission is to create the largest onchain community, driving the consumer crypto revolution.

Igloo Inc.

Our mission is to create the largest onchain community, driving the consumer crypto revolution.

External image

igloo.inc

Visit Website

Our mission is to create the largest onchain community, driving the consumer crypto revolution.

Igloo Inc.

Our mission is to create the largest onchain community, driving the consumer crypto revolution.

External image

igloo.inc

Visit Website

How Frank Gehry and his team designed a monument to music— the story of the Walt Disney Concert Hall. A new online exhibition from Getty.

Frank Gehry and the Walt Disney Concert Hall | Sculpting Harmony

How Frank Gehry and his team designed a monument to music— the story of the Walt Disney Concert Hall. A new online exhibition from Getty.

External image

gehry.getty.edu

Visit Website

How Frank Gehry and his team designed a monument to music— the story of the Walt Disney Concert Hall. A new online exhibition from Getty.

Frank Gehry and the Walt Disney Concert Hall | Sculpting Harmony

How Frank Gehry and his team designed a monument to music— the story of the Walt Disney Concert Hall. A new online exhibition from Getty.

External image

gehry.getty.edu

Visit Website

KPRverse is an immersive digital storytelling platform that blends interactive world building, art, and blockchain powered collectibles, enabling communities to explore, shape, and expand a shared narrative universe.

KPR | Story

KPRverse is an immersive digital storytelling platform that blends interactive world building, art, and blockchain powered collectibles, enabling communities to explore, shape, and expand a shared narrative universe.

External image

kprverse.com

Visit Website

KPRverse is an immersive digital storytelling platform that blends interactive world building, art, and blockchain powered collectibles, enabling communities to explore, shape, and expand a shared narrative universe.

KPR | Story

KPRverse is an immersive digital storytelling platform that blends interactive world building, art, and blockchain powered collectibles, enabling communities to explore, shape, and expand a shared narrative universe.

External image

kprverse.com

Visit Website

We design and produce 3D visual storytelling, immersive websites, and interactive digital experiences that help brands stand out online.

Lusion - Award Winning 3D and Interactive Web Studio

We design and produce 3D visual storytelling, immersive websites, and interactive digital experiences that help brands stand out online.

External image

lusion.co

Visit Website

We design and produce 3D visual storytelling, immersive websites, and interactive digital experiences that help brands stand out online.

Lusion - Award Winning 3D and Interactive Web Studio

We design and produce 3D visual storytelling, immersive websites, and interactive digital experiences that help brands stand out online.

External image

lusion.co

Visit Website

Step into the trenches and experience the making of the World War I movie epic, 1917. Watch the trailer here. In theaters now.

1917 | 360 Trench Experience | In Theaters Now

Step into the trenches and experience the making of the World War I movie epic, 1917. Watch the trailer here. In theaters now.

External image

intothetrenches.1917.movie

Visit Website

Step into the trenches and experience the making of the World War I movie epic, 1917. Watch the trailer here. In theaters now.

1917 | 360 Trench Experience | In Theaters Now

Step into the trenches and experience the making of the World War I movie epic, 1917. Watch the trailer here. In theaters now.

External image

intothetrenches.1917.movie

Visit Website

A living cinematic prophecy, half-written. Scroll the golden trophy through nine chapters — the legends, the fallen kingdoms, the memory clouds, and the real roads of the last eight.

The Last Dance For Glory

A living cinematic prophecy, half-written. Scroll the golden trophy through nine chapters — the legends, the fallen kingdoms, the memory clouds, and the real roads of the last eight.

External image

lastdanceforglory.world

Visit Website

A living cinematic prophecy, half-written. Scroll the golden trophy through nine chapters — the legends, the fallen kingdoms, the memory clouds, and the real roads of the last eight.

The Last Dance For Glory

A living cinematic prophecy, half-written. Scroll the golden trophy through nine chapters — the legends, the fallen kingdoms, the memory clouds, and the real roads of the last eight.

External image

lastdanceforglory.world

Visit Website

A behind-the-scenes look at the engineering behind Ridgeline, covering the architectural decisions, Webflow integration, real-time terrain rendering, animation techniques, and performance optimizations that brought a cinematic 3D experience to life.

Building Ridgeline: Engineering a Real-Time 3D Experience in Webflow | Codrops

A behind-the-scenes look at the engineering behind Ridgeline, covering the architectural decisions, Webflow integration, real-time terrain rendering, animation techniques, and performance optimizations that brought a cinematic 3D experience to life.

External image

tympanus.net/codrops/2026/07/22/building-ridgeline-engineering-a-real-time-3d-experience-in-webflow

Visit Website

A behind-the-scenes look at the engineering behind Ridgeline, covering the architectural decisions, Webflow integration, real-time terrain rendering, animation techniques, and performance optimizations that brought a cinematic 3D experience to life.

Building Ridgeline: Engineering a Real-Time 3D Experience in Webflow | Codrops

A behind-the-scenes look at the engineering behind Ridgeline, covering the architectural decisions, Webflow integration, real-time terrain rendering, animation techniques, and performance optimizations that brought a cinematic 3D experience to life.

External image

tympanus.net/codrops/2026/07/22/building-ridgeline-engineering-a-real-time-3d-experience-in-webflow

Visit Website

Avant-garde branding and digital experience for a luxury real estate brand redefining the sector through design, motion, and a distinctive unconventional narrative.

NORMAL IS BORING

Avant-garde branding and digital experience for a luxury real estate brand redefining the sector through design, motion, and a distinctive unconventional narrative.

External image

normalisboring.es

Visit Website

Avant-garde branding and digital experience for a luxury real estate brand redefining the sector through design, motion, and a distinctive unconventional narrative.

NORMAL IS BORING

Avant-garde branding and digital experience for a luxury real estate brand redefining the sector through design, motion, and a distinctive unconventional narrative.

External image

normalisboring.es

Visit Website

Flowers that bring a joy every day. For those who choose aesthetics, attention to detail, and the pleasure of a subtle fragrance

Shop Flowers Sim

Flowers that bring a joy every day. For those who choose aesthetics, attention to detail, and the pleasure of a subtle fragrance

External image

flowers-sim.ru

Visit Website

Flowers that bring a joy every day. For those who choose aesthetics, attention to detail, and the pleasure of a subtle fragrance

Shop Flowers Sim

Flowers that bring a joy every day. For those who choose aesthetics, attention to detail, and the pleasure of a subtle fragrance

External image

flowers-sim.ru

Visit Website

Step into the future of brand storytelling. KODE Immersive fuses cutting-edge AR, VR, real-time 3D, and spatial computing to craft high-impact, interactive experiences. Break boundaries, ignite emotions, and redefine engagement.

KODE Immersive

Step into the future of brand storytelling. KODE Immersive fuses cutting-edge AR, VR, real-time 3D, and spatial computing to craft high-impact, interactive experiences. Break boundaries, ignite emotions, and redefine engagement.

External image

kodeimmersive.com

Visit Website

Step into the future of brand storytelling. KODE Immersive fuses cutting-edge AR, VR, real-time 3D, and spatial computing to craft high-impact, interactive experiences. Break boundaries, ignite emotions, and redefine engagement.

KODE Immersive

Step into the future of brand storytelling. KODE Immersive fuses cutting-edge AR, VR, real-time 3D, and spatial computing to craft high-impact, interactive experiences. Break boundaries, ignite emotions, and redefine engagement.

External image

kodeimmersive.com

Visit Website

The opening watercolor experience that introduces David Whyte's online Companion Portal.

Experience & advantages - David Whyte

The opening watercolor experience that introduces David Whyte's online Companion Portal.

External image

davidwhyte.com/experience

Visit Website

The opening watercolor experience that introduces David Whyte's online Companion Portal.

Experience & advantages - David Whyte

The opening watercolor experience that introduces David Whyte's online Companion Portal.

External image

davidwhyte.com/experience

Visit Website

The commerce renaissance is here. Explore 150+ product updates across AI, retail, and more.

Shopify Editions | Winter '26

The commerce renaissance is here. Explore 150+ product updates across AI, retail, and more.

External image

shopify.com/editions/winter2026

Visit Website

The commerce renaissance is here. Explore 150+ product updates across AI, retail, and more.

Shopify Editions | Winter '26

The commerce renaissance is here. Explore 150+ product updates across AI, retail, and more.

External image

shopify.com/editions/winter2026

Visit Website

Sell face to face, online, in social channels, and AI chats with 150+ updates to Shopify. The only platform you need to sell everywhere.

Shopify Editions | Spring ’26

Sell face to face, online, in social channels, and AI chats with 150+ updates to Shopify. The only platform you need to sell everywhere.

External image

shopify.com/editions/spring2026

Visit Website

Sell face to face, online, in social channels, and AI chats with 150+ updates to Shopify. The only platform you need to sell everywhere.

Shopify Editions | Spring ’26

Sell face to face, online, in social channels, and AI chats with 150+ updates to Shopify. The only platform you need to sell everywhere.

External image

shopify.com/editions/spring2026

Visit Website

Harmony is not something to be created — it is something to be remembered. Guided by the spirit of Wa, Izanami designs harmony across life through School, Craft, and Retreat.

IZANAMI

Harmony is not something to be created — it is something to be remembered. Guided by the spirit of Wa, Izanami designs harmony across life through School, Craft, and Retreat.

External image

izanami-official.com

Visit Website

Harmony is not something to be created — it is something to be remembered. Guided by the spirit of Wa, Izanami designs harmony across life through School, Craft, and Retreat.

IZANAMI

Harmony is not something to be created — it is something to be remembered. Guided by the spirit of Wa, Izanami designs harmony across life through School, Craft, and Retreat.

External image

izanami-official.com

Visit Website

Dragonfly is a leading crypto investment fund. We back the best researchers and builders who will push the entire crypto ecosystem forward.

Dragonfly

Dragonfly is a leading crypto investment fund. We back the best researchers and builders who will push the entire crypto ecosystem forward.

External image

dragonfly.xyz

Visit Website

Dragonfly is a leading crypto investment fund. We back the best researchers and builders who will push the entire crypto ecosystem forward.

Dragonfly

Dragonfly is a leading crypto investment fund. We back the best researchers and builders who will push the entire crypto ecosystem forward.

External image

dragonfly.xyz

Visit Website

Ridgeline reconstructs real mountain ranges — Tre Cime, Mont Blanc, Annapurna — from SRTM elevation data into cinematic, topographic 3D terrain. Explore the surveys.

Ridgeline — Topographic 3D Mountain Terrain Surveys

Ridgeline reconstructs real mountain ranges — Tre Cime, Mont Blanc, Annapurna — from SRTM elevation data into cinematic, topographic 3D terrain. Explore the surveys.

External image

topography.webflow.io

Visit Website

Ridgeline reconstructs real mountain ranges — Tre Cime, Mont Blanc, Annapurna — from SRTM elevation data into cinematic, topographic 3D terrain. Explore the surveys.

Ridgeline — Topographic 3D Mountain Terrain Surveys

Ridgeline reconstructs real mountain ranges — Tre Cime, Mont Blanc, Annapurna — from SRTM elevation data into cinematic, topographic 3D terrain. Explore the surveys.

External image

topography.webflow.io

Visit Website

Generate photorealistic AI characters with precise pose control. Create images, videos with lip-sync, and auto-post to Instagram, X, TikTok, Threads, YouTube & Snapchat. Start free.

Orior AI

Generate photorealistic AI characters with precise pose control. Create images, videos with lip-sync, and auto-post to Instagram, X, TikTok, Threads, YouTube & Snapchat. Start free.

External image

oriorai.com

Visit Website

Generate photorealistic AI characters with precise pose control. Create images, videos with lip-sync, and auto-post to Instagram, X, TikTok, Threads, YouTube & Snapchat. Start free.

Orior AI

Generate photorealistic AI characters with precise pose control. Create images, videos with lip-sync, and auto-post to Instagram, X, TikTok, Threads, YouTube & Snapchat. Start free.

External image

oriorai.com

Visit Website

大塚製薬は、からだ本来の力を呼び覚ます、“Active Inner Resource”という思想にたどり着きました。その思想を形にしたのが、酸素を活かす成分「ケンフェロール」を含有したセルフコンディショニングフード「/zeroz（ゼロズ）」です。

zeroz

大塚製薬は、からだ本来の力を呼び覚ます、“Active Inner Resource”という思想にたどり着きました。その思想を形にしたのが、酸素を活かす成分「ケンフェロール」を含有したセルフコンディショニングフード「/zeroz（ゼロズ）」です。

External image

otsuka-air.jp

Visit Website

大塚製薬は、からだ本来の力を呼び覚ます、“Active Inner Resource”という思想にたどり着きました。その思想を形にしたのが、酸素を活かす成分「ケンフェロール」を含有したセルフコンディショニングフード「/zeroz（ゼロズ）」です。

zeroz

大塚製薬は、からだ本来の力を呼び覚ます、“Active Inner Resource”という思想にたどり着きました。その思想を形にしたのが、酸素を活かす成分「ケンフェロール」を含有したセルフコンディショニングフード「/zeroz（ゼロズ）」です。

External image

otsuka-air.jp

Visit Website

In this Framer tutorial, you'll learn how to create an image sequence scroll animation on your Framer website. I'll show you how to set up your components and variants to create this effect in Framer, and I'm gonna also hand you a code override that you can use to play an image sequence on scroll on your website. After watching this video, you'll be able create any image sequence animation on your Framer website.

Framer Tutorial: Making The AirPods Pro Scroll Animation

In this Framer tutorial, you'll learn how to create an image sequence scroll animation on your Framer website. I'll show you how to set up your components and variants to create this effect in Framer, and I'm gonna also hand you a code override that you can use to play an image sequence on scroll on your website. After watching this video, you'll be able create any image sequence animation on your Framer website.

External image

youtube.com/watch?v=tRkN8tgya8E

Visit Website

In this Framer tutorial, you'll learn how to create an image sequence scroll animation on your Framer website. I'll show you how to set up your components and variants to create this effect in Framer, and I'm gonna also hand you a code override that you can use to play an image sequence on scroll on your website. After watching this video, you'll be able create any image sequence animation on your Framer website.

Framer Tutorial: Making The AirPods Pro Scroll Animation

In this Framer tutorial, you'll learn how to create an image sequence scroll animation on your Framer website. I'll show you how to set up your components and variants to create this effect in Framer, and I'm gonna also hand you a code override that you can use to play an image sequence on scroll on your website. After watching this video, you'll be able create any image sequence animation on your Framer website.

External image

youtube.com/watch?v=tRkN8tgya8E

Visit Website

Submit Resource

Submit Resource

Submit Resource

Submit Resource

Conceived and created by

Naveen

All thumbnails © their respective owners

Conceived and created by

Naveen

All thumbnails © their respective owners

Conceived and created by

Naveen

All thumbnails © their respective owners

Conceived and created by

Naveen

All thumbnails © their respective owners

Conceived and created by

Naveen

All thumbnails © their respective owners

Conceived and created by

Naveen

All thumbnails © their respective owners

Create a free website with Framer, the website builder loved by startups, designers and agencies.