Stories Slideshow

Tutorial

Details

Stories Slideshow is the ultimate media display component for Framer. Drag and drop your galleries of images and videos and showcase your media with an Instagram/Snapchat Stories-like style. Customize the share icon to share links that auto-copy to the clipboard when clicked. Designed with mobile in mind, Stories Slideshow brings effortless trust and interactivity to your website. Customize every part of the component and toggle visibility of every element for a unique, delightful user experience.

Features

• Hover to pause, click to progress through slides

• Upload images and videos directly

• Audio support for videos

• Customize story duration by milliseconds (ms)

• Customize username, avatar and time elapsed

• Customize share icon with link to auto-copy to clipboard

• Enable/Disable Heart Animation

• Toggle visibility of every element - user info, time elapsed, progress bars, message and every icon

• Mobile optimized - Users tap the middle to pause and tap left or right to progress on mobile devices

Customizations

• Customize text, font & color username

• Customize text, font & color of time elapsed

• Customize message and design with the two message modes: Glass & Transparent

• Customize link for share icon that copies to clipboard when clicked

• Enable/Disable animated user info intro

Custom Transition Animations

• Smooth Blend (Default)

• Slide

• Zoom

• 3D Flip

• No animation (Disables transition animation)

Toggle Visibility (All elements)

• Show/Hide Progress Bars

• Show/Hide Username

• Show/Hide Time Duration

• Toggle arrow visibility

• Customize border radius

• Enable/Disable hovering ability

• Show/Hide ellipsis (menu)

• Show/Hide customizable message

• Show/Hide heart

• Show/Hide share icon

Great for:

• Creative portfolios

• Social media management agencies

• Influencer agency websites

• eCommerce websites