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.
Animation Timing
Duration Control
Customize how long each animation plays. Set durations from 100ms (snappy) to 2000ms (slow and dramatic).
- Minimum: 100 milliseconds
- Maximum: 2000 milliseconds (2 seconds)
- Recommended: 300-800ms for most use cases
Duration Guidelines
- 100-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 |
|---|---|---|
| Fade In | Bar gradually appears from invisible to full opacity | Professional, subtle announcements |
| Slide Down | Bar slides in from the top of the screen downward | Top-positioned bars, header announcements |
| Slide Up | Bar slides in from the bottom of the screen upward | Bottom-positioned bars, footer announcements |
Pro Plan Animations
| Animation | Description | Best For |
|---|---|---|
| Slide Left | Bar slides in from the right side toward the left | Side-positioned bars, directional effect |
| Slide Right | Bar slides in from the left side toward the right | Side-positioned bars, emphasizing direction |
| Zoom In | Bar scales up from small to full size, starting from center | Important announcements, promotions |
| Bounce In | Bar bounces into place with elastic easing | Fun, playful brands, special offers |
| Flip In | Bar flips into view with a 3D rotation effect | Eye-catching promotions, product launches |
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 |
|---|---|---|
| Fade Out | Bar gradually disappears to invisible | Professional, clean exit |
| Slide Out Up | Bar slides upward off the screen | Bottom-positioned bars closing |
| Slide Out Down | Bar slides downward off the screen | Top-positioned bars closing |
Pro Plan Animations
| Animation | Description | Best For |
|---|---|---|
| Slide Out Left | Bar slides leftward off the screen | Right-positioned bars, directional exit |
| Slide Out Right | Bar slides rightward off the screen | Left-positioned bars, smooth exit |
| Zoom Out | Bar scales down to nothing, shrinking from center | Professional, polished closing |
| Bounce Out | Bar bounces out with elastic easing | Fun, playful brands, matching bounce-in |
Animation Defaults and Recommendations
Recommended Combinations
Professional / Corporate
- Entry: Fade In (300ms)
- Exit: Fade Out (300ms)
- Best for: News, updates, enterprise announcements
Ecommerce / Retail
- Entry: Slide Down (400ms)
- Exit: Fade Out (300ms)
- Best for: Sales, promotions, limited-time offers
Playful / Fun Brand
- Entry: Bounce In (500ms)
- Exit: Bounce Out (400ms)
- Best for: Games, casual brands, exciting announcements
Premium / Luxury
- Entry: Fade In (500ms)
- Exit: Zoom Out (400ms)
- Best for: Exclusive offers, VIP announcements
Fast / Urgent
- Entry: Zoom In (200ms)
- Exit: Fade Out (200ms)
- Best for: Flash sales, emergency announcements
Pro Feature: Slide Left, Slide Right, Zoom In, Bounce In, Flip In (entry) and Slide Out Left, Slide Out Right, Zoom Out, Bounce Out (exit) animations are available exclusively on the Pro plan.
Complete Animation Reference Table
| Animation | Type | Category | Plan | Suggested Duration |
|---|---|---|---|---|
| Fade In | Entry | Opacity | Free | 300-500ms |
| Slide Down | Entry | Position | Free | 300-600ms |
| Slide Up | Entry | Position | Free | 300-600ms |
| Slide Left | Entry | Position | Pro | 300-600ms |
| Slide Right | Entry | Position | Pro | 300-600ms |
| Zoom In | Entry | Scale | Pro | 300-500ms |
| Bounce In | Entry | Elastic | Pro | 400-700ms |
| Flip In | Entry | 3D Transform | Pro | 500-800ms |
| Fade Out | Exit | Opacity | Free | 200-400ms |
| Slide Out Up | Exit | Position | Free | 200-500ms |
| Slide Out Down | Exit | Position | Free | 200-500ms |
| Slide Out Left | Exit | Position | Pro | 200-500ms |
| Slide Out Right | 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