Skip to content

component

Vertical Slider

By Aidan Looker

Details

Summary

What is Vertical Slider?

Description

What is Vertical Slider? Vertical Slider marries striking, edge-to-edge typography with fluid, physics-based image transitions. It automatically scales and measures title text to perfectly fill available container space, creating a dense, editorial aesthetic. Core Features Auto-Scaling Typography : Advanced dynamic text sizing automatically calculates exact layout constraints and applies vertical scaling (scaleY) to stretch titles, creating that signature ultra-tall letterform look without breaking layouts. Continuous Three-Image Strip : Renders previous, current, and next images simultaneously in a vertical stack. Seamless, synchronized spring animations make the carousel feel like an infinite, unbroken visual strip. Smart Trackpad Optimization : Features a custom-built inertia dampener that detects scroll tails and cooldowns, ensuring a single swipe or mouse wheel flick perfectly snaps to one slide—eliminating frustrating double-jumps. Choreographed Entrances : Beautiful staggered entrance animations trigger on mount, fading and dropping the text and images smoothly into place for a powerful first impression. Fully Interactive : Complete navigation options out-of-the-box. Users can navigate via wheel scroll, trackpad swipe, touch drag, keyboard arrows, or by simply clicking the top and bottom peek images. Controls inside Framer Content Slides (Title, Subtitle) Images (Array of Responsive Images) Appearance Theme (Light / Dark / Custom) Custom Colors (Background, Text, Number, Subtitle, Arrow) Layout & Sizing Image Width % Image Corner Radius Gap Show Subtitle / Nav Numbers / Arrows Typography Title Font (Defaults to Bebas Neue) Subtitle Font Number Font Behavior Transition Duration Auto Play (On/Off) Auto Play Interval Wheel Scroll (On/Off) Entrance Animation (On/Off) Best use cases High-end fashion lookbooks or seasonal campaign showcases. Editorial-style landing pages that prioritize striking visuals and bold typography. Portfolio galleries for photographers or designers looking for a premium, interactive display. Ready to elevate your Framer project with premium editorial design? Drop it in, add your images, and watch it shine. Questions or custom requests? We design and build custom Framer components. Get in touch at contact@teampixel.com.au .

Introduction

Editorial-style vertical image carousel

Rank history

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

125015001750182468/148/228/309/79/15
  • All · #8098