Animations control how smoothly your notification appears and disappears. Good motion feels polished without distracting visitors.
Find these under Appearance → Animation Settings. Pair with Display Types and Position for the full look.
Show animation
Show Animation runs when the notification first appears.
| Option | Effect |
|---|---|
| Fade In | Gentle opacity fade (default) |
| Slide In From Left / Right / Top / Bottom | Slides in from that direction |
| Bounce | Bouncy entrance |
| Zoom In | Scales up into view |
| Flip | Flip effect |
| No Animation | Appears instantly |
Pick a slide direction that matches your position (e.g. slide from right for top-right side boxes).
Hide animation
Hide Animation runs when the notification closes or auto-hides.
| Option | Effect |
|---|---|
| Fade Out | Gentle fade away (default) |
| Slide Out To Left / Right / Top / Bottom | Slides out that way |
| Bounce, Zoom Out, Flip | Same styles as show, in reverse |
| No Animation | Disappears instantly |
You can mix styles (e.g. fade in, slide out).
Animation duration
Animation Duration (ms) is how long each animation takes, in milliseconds.
- Default is around 300 ms (about a third of a second)
- Range: 0 to 2000 ms
- Hidden when both Show and Hide are set to No Animation
| Feel | Suggested duration |
|---|---|
| Snappy | 150 to 250 ms |
| Standard | 300 to 400 ms |
| Slow, dramatic | 600 ms or more |
Duration and timing tab
Animations are only visual. How long the notification stays on screen is set on the Timing tab under Display Duration. See When Should the Notification Show?.
Tips for non-designers
- Fade is safe for almost every site.
- Match slide direction to position so the box does not slide from the wrong side.
- Avoid very long durations on mobile; visitors may think the site is slow.
- Test with Preview after changing animations.
Checklist
- [ ] Set Show Animation for entrance
- [ ] Set Hide Animation for exit
- [ ] Adjust duration if motion feels too fast or slow
- [ ] Previewed show and hide on the front end