Svelte Ken Burns, CSS-Only Slideshow Component
How can you create smooth pan-and-zoom slideshow effects without JavaScript?
demo site screenshot of the slideshow interface with mountain village photo and sliders for adjusting animation settings
A CSS-based slideshow component for Svelte that creates dynamic pan-and-zoom motion effects inspired by filmmaker Ken Burns' documentary style, functioning entirely without JavaScript. svelte-ken-burns.pages.dev ⇛
Role:
- Creator and Lead Developer
- Open Source Maintainer
- UI/UX Design
- Technical Documentation
Outcome:
I created a slideshow component for the classic "rostrum camera" effect popularized by Ken Burns, supporting pan and zoom animations configurable for each slide, functioning without JavaScript using pure CSS transitions, and respecting user accessability preferences for reduced motion. The library still functions today as demonstrated below.
Demo:
