Reveal Slider
A dramatic, clip-path driven slideshow with sophisticated reveal transitions. Create high-end, editorial presentations that captivate and convert.
Overview
The Reveal Slider uses advanced CSS clip-path animations and a dual-image layout (small + large) per slide. Transitions reveal from the direction of navigation, creating a sophisticated, magazine-inspired feel.
✨
Clip-Path Reveals
Premium directional reveal transitions
🖼️
Dual Image Layout
Small + large images per slide
🎯
Product or Custom
Use product data or custom content
⚡
Smooth Performance
GPU-accelerated animations
When to Use
- Homepage hero — Showcase products with dynamic transitions
- Collection highlights — Feature multiple products dramatically
- Campaign pages — Create editorial, magazine-style presentations
- Product launches — Draw attention to new arrivals
Quick Setup
Add Reveal Slider in 3 Steps
- 1Add section → Reveal slider
- 2Add Product slide or Custom slide blocks
- 3Configure animation and background settings
Section Settings
Background
| Setting | Type | Default | Description |
|---|---|---|---|
| Dynamic background | checkbox | true | Background changes smoothly as slides transition, creating an ambient effect. |
| Style | select | Extracted color | How the dynamic background is generated. |
Background Style Options:
Background Styles
Extracted colorRecommended
Creates a smooth ambient color from each image
Blurred image
Uses a blurred version of the slide image
Layout
| Setting | Type | Default | Description |
|---|---|---|---|
| Height | range | 70vh | Section height as viewport percentage. Range: 50–90vh. |
| Content alignment | select | Bottom | Vertical position of text content: Top or Bottom. |
Animation
| Setting | Type | Default | Description |
|---|---|---|---|
| Transition duration | range | 1s | How long the reveal animation takes. Range: 0.3–3 seconds. |
| Easing curve | select | Sharp | Animation timing function. |
Easing Options:
Animation Easing
Ease
Standard browser easing
Ease in-out
Smooth start and end
SharpRecommended
Dramatic, high-end motion
Smooth
Gentle, flowing animation
Bouncy
Playful, slightly elastic feel
Autoplay
| Setting | Type | Default | Description |
|---|---|---|---|
| Enable autoplay | checkbox | false | Automatically cycle through slides. |
| Interval | range | 6 seconds | Time between auto-transitions. Range: 3–12 seconds. |
Spacing
| Setting | Type | Default | Description |
|---|---|---|---|
| Remove top spacing | checkbox | false | Enable edge-to-edge display with the previous section. |
Block Types
Product Slide
Automatically pulls product data (title, images, description, vendor).
| Setting | Type | Default | Description |
|---|---|---|---|
| Product | product | - | Select a product. Its first two images become the large and small images. |
| Show vendor as kicker | checkbox | true | Display the product vendor above the title. |
| Custom kicker | text | - | Override text when vendor kicker is disabled. |
| Override title | text | - | Custom title instead of product title. |
| Description source | select | Product description | Where to pull descriptive text: Product description or Metafield. |
| Metafield namespace/key | text | - | Required when using metafield as description source. |
| Button text | text | Get it now | CTA button label. |
Custom Slide
Full manual control over images and content.
| Setting | Type | Default | Description |
|---|---|---|---|
| Small image | image | - | Secondary image (appears smaller in the layout). |
| Large image | image | - | Primary image (takes up most of the slide). |
| Kicker | text | - | Small text above the title. |
| Title | text | GRAFFITI FLEX STREET CAP | Main headline. |
| Button text | text | GET IT NOW | CTA button label. |
| URL | url | - | Link destination. |
| Product (optional) | product | - | Link a product to pull its data instead of manual entry. |
How the Reveal Animation Works
- User navigates — Clicks prev/next or dots
- Direction detected — Animation comes from left or right based on navigation
- Clip-path reveal — New slide is revealed via CSS clip-path animation
- Content slides — Text content moves in the same direction
- Background transitions — If enabled, ambient background cross-fades
This creates a cohesive, directional motion that feels intentional and premium.
Image Recommendations
Product Slides
- Products with 2+ images work best
- First image becomes the large image
- Second image becomes the small image
- If only one image exists, it's used for both
Custom Slides
Large image
2400×1600px — Main focus, dominates the slide
Small image
1200×1200px — Secondary, adds visual interest
Best Practices
Content Strategy
- Use high-quality images — The reveal animation draws attention to details
- Keep titles short — 3-5 words for maximum impact
- Use consistent styling — Same kicker style across slides
- 3-5 slides — Enough variety without overwhelming
Animation Tuning
- 1 second duration — The sweet spot for most cases
- Sharp easing — Creates a luxury, editorial feel
- 6+ second autoplay — Gives time to read and absorb
Performance
- Optimize images — Large hero images impact load time
- Limit to 8 slides max — Theme enforces this limit
- Test on mobile — Ensure animations are smooth
Troubleshooting
Images not appearing
- Verify images are uploaded to the slide blocks
- For product slides, ensure the product has images
- Check that image files are under Shopify size limits
Animation looks choppy
- Reduce Transition duration to 0.8s
- Try a different Easing curve
- Check browser performance and GPU acceleration
Dynamic background not working
- Ensure Dynamic background is enabled
- Background needs valid images to extract colors
- Try switching between Color and Blur modes
Dots not showing
- Ensure multiple slide blocks are added
- Check that section JavaScript is loading properly