https://framer.com/m/HeroSlider-syXxqW.js
Io / Enhancements / HeroAnimatedSlider
HeroAnimatedSlider
HeroAnimatedSlider carries up to six slides, each with its own title, description and picture, and moves between them as one animated hero block.
Examples
Live specimens for every control the component exposes.
Default
Each slide is three flat controls — title, description and image — rather than an array, so the panel stays legible. Slides you leave at their defaults keep the copy the component ships with.
Frame
framePadding insets the whole hero inside its frame; frameAlign decides whether the block stretches or sits to one side.
stretch
centre
padding 48
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for HeroAnimatedSlider
A hero should carry several messages in rotation.
Each slide needs its own picture as well as its own words.
The slides are fixed copy rather than CMS items.
The hero must carry its own pictures rather than one background image.
Reach for something else
There are more than six slides — use Carousel or Slideshow.
The slides come from a collection.
Readers should drag or swipe between them.
Io — Enhancements
Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.