Overview
Animations draw attention to your announcement bars and enhance the user experience. Choose entrance animations to grab visitors' attention when the bar appears, and exit animations for smooth departures. Announcement bars offer 10 animations: 5 entry and 5 exit. Slide Down (entry) and Slide Out Up (exit) are free; the rest are Pro.
Animation Timing
Duration Control
Customize how long each animation plays. Set durations from 200ms (snappy) to 2000ms (slow and dramatic).
- Minimum: 200 milliseconds
- Maximum: 2000 milliseconds (2 seconds)
- Recommended: 300-800ms for most use cases
Duration Guidelines
- 200-300ms: Quick, subtle animations - good for professional sites
- 300-500ms: Balanced - noticeable but not distracting
- 500-800ms: Slower, more dramatic - draws significant attention
- 800-2000ms: Very slow - use sparingly for special emphasis
Entry Animations
Entry animations play when the announcement bar first appears on screen. These animations help capture attention and signal that something new or important has arrived.
Free Plan Animations
| Animation | Description | Best For |
|---|---|---|
| Slide Down | Bar slides in from the top of the screen downward | Top-positioned bars, header announcements |
Pro Plan Animations
| Animation | Description | Best For |
|---|---|---|
| Fade In | Bar gradually appears from invisible to full opacity | Professional, subtle announcements |
| Slide Up | Bar slides in from the bottom of the screen upward | Bottom-positioned bars, footer announcements |
| Bounce In | Bar bounces into place with elastic easing | Fun, playful brands, special offers |
| Zoom In | Bar scales up from small to full size, starting from center | Important announcements, promotions |
Exit Animations
Exit animations play when the announcement bar is dismissed or automatically closed. These provide a polished, finished feel to the interaction.
Free Plan Animations
| Animation | Description | Best For |
|---|---|---|
| Slide Out Up | Bar slides upward off the screen | Top-positioned bars closing |
Pro Plan Animations
| Animation | Description | Best For |
|---|---|---|
| Fade Out | Bar gradually disappears to invisible | Professional, clean exit |
| Slide Out Down | Bar slides downward off the screen | Bottom-positioned bars closing |
| Bounce Out | Bar bounces out with elastic easing | Fun, playful brands, matching bounce-in |
| Zoom Out | Bar scales down to nothing, shrinking from center | Professional, polished closing |
Animation Defaults and Recommendations
Recommended Combinations
Professional / Corporate
- Entry: Fade In (300ms, Pro)
- Exit: Fade Out (300ms, Pro)
- Best for: News, updates, enterprise announcements
Ecommerce / Retail
- Entry: Slide Down (400ms)
- Exit: Slide Out Up (300ms)
- Best for: Sales, promotions, limited-time offers
Playful / Fun Brand
- Entry: Bounce In (500ms, Pro)
- Exit: Bounce Out (400ms, Pro)
- Best for: Games, casual brands, exciting announcements
Premium / Luxury
- Entry: Fade In (500ms, Pro)
- Exit: Zoom Out (400ms, Pro)
- Best for: Exclusive offers, VIP announcements
Fast / Urgent
- Entry: Zoom In (200ms, Pro)
- Exit: Fade Out (200ms, Pro)
- Best for: Flash sales, emergency announcements
Pro Feature: Fade In, Slide Up, Bounce In, Zoom In (entry) and Fade Out, Slide Out Down, Bounce Out, Zoom Out (exit) animations are available exclusively on the Pro plan.
Complete Animation Reference Table
| Animation | Type | Category | Plan | Suggested Duration |
|---|---|---|---|---|
| Fade In | Entry | Opacity | Pro | 300-500ms |
| Slide Down | Entry | Position | Free | 300-600ms |
| Slide Up | Entry | Position | Pro | 300-600ms |
| Zoom In | Entry | Scale | Pro | 300-500ms |
| Bounce In | Entry | Elastic | Pro | 400-700ms |
| Fade Out | Exit | Opacity | Pro | 200-400ms |
| Slide Out Up | Exit | Position | Free | 200-500ms |
| Slide Out Down | Exit | Position | Pro | 200-500ms |
| Zoom Out | Exit | Scale | Pro | 200-400ms |
| Bounce Out | Exit | Elastic | Pro | 300-600ms |
Best Practices
- Keep animations subtle: Animations should enhance, not distract. Avoid overly long durations for frequent bars
- Match entry and exit: Use complementary animations (e.g., Slide Down with Slide Out Up) for visual consistency
- Test on mobile: Some animations may feel rushed on slow devices; test thoroughly
- Respect user preferences: Consider prefers-reduced-motion for accessibility; disable animations for users who request it
- Consider page context: Use faster animations (300ms) on busy pages, slower (500ms) on simpler layouts
- Don't animate every bar: Reserve animations for important announcements; overuse diminishes their impact
- Test duration impact: Slightly faster animations feel more modern; slightly slower feel more premium
Accessibility Considerations
HashBar respects user accessibility preferences:
- prefers-reduced-motion: If a user has enabled "Reduce Motion" in their system settings, animations will be disabled or significantly shortened
- Focus management: Animations don't interfere with keyboard navigation or focus indicators
- Screen readers: Animations don't hide or obscure important announcement content
Performance Considerations
- Animations use hardware acceleration for smooth performance
- All animations are optimized and won't impact page load times
- Exit animations complete before the bar is removed from the DOM
- On lower-end devices, animations automatically degrade gracefully
Related Documentation
- Scheduling - Control when your animated bars appear
- Countdown Timer - Pair with animations for eye-catching promotions
- A/B Testing - Test different animation styles to find what works best