FrameShift is a premium interactive portfolio slider for Framer, built for designers, studios, photographers, architects, agencies, and brands that want a more cinematic way to showcase their work.
Instead of a traditional carousel, FrameShift uses layered motion. The project number, text, main image, and supporting images move independently with different timing and parallax values, creating smooth, editorial transitions with depth.
Layered Parallax Transitions - independent motion for text, numbers, main image, and supporting images.
3 Images Per Slide - main, secondary, and third images with individual positioning and sizing.
Fully Responsive - separate desktop, tablet, and mobile layouts and controls.
Responsive Main Image - fixed px or relative % sizing with min/max limits.
Interactive Drag - mouse and touch dragging with smooth inertia.
Interruptible Animations - click NEXT/PREV or start dragging mid-transition without waiting for the animation to finish.
30 / 60 FPS Modes - choose between maximum smoothness or more performance-focused animation.
Global Cursor 3D - main image reacts to cursor position with tilt, movement, skew, depth, and perspective.
Advanced Motion Controls - spring, easing, custom Bézier, duration, blur, scale, fade, travel distance, and parallax.
Independent Image Timing - control how quickly each image follows the transition.
Mobile Editorial Layout - dedicated mobile image composition with independent positioning and sizing.
Autoplay & Infinite Loop - configurable delay, pause behavior, and resume timing.
Navigation & Pagination - customizable PREV/NEXT controls, hover effects, dots or bars.
Project Links - make images and project information clickable without interfering with drag.
Off-Screen Optimization - automatically pauses unnecessary motion when outside the viewport.
Custom or Transparent Background
Image Fit & Aspect Ratio Controls
Full Framer Property Controls - customize everything without touching code.
