Skip to content

component

Vertical Parallax

By Harsh Works

Details

Summary

Vertical Parallax is a vertical image and video gallery for Framer with two distinct modes built into the same component.

Description

Vertical Parallax Vertical Parallax is a vertical image and video gallery for Framer. Drop it into an editorial feature, a photo essay, a long case study, or any section where a tall column of media should carry the page rather than decorate it. Every image sits slightly taller than its frame and drifts counter to the column as it moves. Frames near the centre of the screen settle, frames toward the edges slide, so the whole column reads like a slow vertical dolly. Two modes, one toggle Scroll mode sits in normal page flow and lets native scrolling drive the motion, so the page never feels hijacked. Turn Loop on and the same column becomes a seamless vertical marquee: auto drift at the speed you set, drag with weighted momentum, and optional scroll to move. Same content, same controls, no rebuild. Four scroll driven effects Center focus. Frames scale up as they reach the centre and ease back down as they leave. Curve. The column bows right or left as frames pass through the centre. Velocity skew. The column skews with scroll speed, then springs back flat when it settles. Desaturate. Colour falls off with distance, so the centre frame is always the subject. Manual or CMS Add items by hand, each with an image or video, a poster, a caption, and a link, or drop a Collection List into the slot and the column reads every row at once. Links follow the row's own route, so dynamic CMS paths resolve in Preview and on the live site. Controls Grouped for clarity: Source, Items, Layout, Motion, Loop, Effect, and Style. Every control carries its own one line description in the panel. What you get A vertical parallax column that doubles as an infinite loop, four combinable scroll effects, manual or CMS data, image and video support, click through links that respect CMS routes, no npm dependencies, a calm static preview, and free updates within the version. Made with 🖤 for Framer by Harsh

Introduction

A vertical looping column

Rank history

Daily rank per list, from the first snapshot — lower is better.

110012001300138088/148/228/309/79/15
  • All · #3321