Overview
The Reveal Block creates interactive hidden content that displays when triggered by user actions or scroll position. Perfect for progressive disclosure, interactive storytelling, and creating engaging user experiences with hidden surprises.
Key Features
- Multiple Trigger Types: Click, hover, or scroll-based reveals
- Customizable Animations: Various reveal effects (fade, slide, zoom)
- Direction Control: Reveal from any direction
- Timing Options: Control animation speed and delays
- Trigger Customization: Customize the reveal button or element
- Hidden by Default: Content is invisible until triggered
How to Use
- Add the Reveal block to your page
- Add content to be revealed inside the block
- Choose trigger type (click, hover, or scroll)
- Select reveal animation effect
- Customize the trigger button text or style
- Set animation speed and direction
- Preview the reveal effect
Block Settings
Trigger Settings
- Trigger Type: Click, hover, or scroll activation
- Trigger Element: Button, custom element, or automatic
- Trigger Text: Customize button label
Animation Settings
- Effect Type: Fade, slide, zoom, or custom animation
- Direction: Top, bottom, left, right, or center
- Duration: Speed of reveal animation
- Delay: Time before animation starts
Common Use Cases
- Spoiler Content: Hide spoilers or answers until clicked
- Progressive Disclosure: Reveal additional information on demand
- Interactive Galleries: Show more images or details
- Easter Eggs: Hide fun surprises for engaged users
- Pricing Details: Show additional pricing tiers or features
- FAQs: Alternative accordion-style content
Best Practices
- Provide clear indication that content can be revealed
- Use appropriate trigger types for your content
- Keep animations smooth and not too slow
- Ensure revealed content is meaningful and valuable
- Test accessibility for keyboard and screen reader users
- Consider showing a preview or hint of hidden content