component
Hero Animation
By Refinery Studio

Details
- Refinery StudioAuthor
- componentType
- 2026-09-12Published
- 2026-09-12Updated
- 2026-09-12Added
- InteractiveCategories
Summary
A flexible hero animation sequence
Description
Create polished, cinematic hero animations with a customizable sequence that brings each element into view with precise timing and control. Animation Sequences Build multi-step animations across text, images, buttons, cards, and other hero elements. Control the order, delay, duration, and stagger of each step. Multiple Triggers Choose how the animation begins: On Load for immediate hero introductions In View for animations triggered when the section enters the viewport Layered Motion Combine multiple animation steps to create sophisticated entrances, reveals, fades, slides, scales, and staggered transitions. Timing Controls Fine-tune delays, duration, easing, stagger, and sequence order to create anything from subtle reveals to dramatic hero entrances. Fully Customizable Adjust animation behavior, trigger settings, timing, movement, opacity, scale, and other visual properties directly from Framer. Built for Hero Experiences Perfect for landing pages, portfolios, SaaS websites, product launches, creative studios, editorial websites, and immersive marketing sections.
Introduction
A flexible hero animation sequence
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #5051