Animations
Animations bring your popup to life with smooth transitions and eye-catching effects. XBuilder integrates Animate.css for a wide variety of animation options.
Animation Types
Entry Animations
How the popup appears:
- Fade in
- Slide in
- Zoom in
- Bounce in
- And many more
Exit Animations
How the popup disappears:
- Fade out
- Slide out
- Zoom out
- Bounce out
- And many more
Hover/Interactive Animations
Effects on user interaction:
- Button hover effects
- Element transitions
- Attention effects
Entry Animations
Fade Animations
| Animation | Effect |
|---|---|
| fadeIn | Fade from transparent |
| fadeInDown | Fade + slide from top |
| fadeInUp | Fade + slide from bottom |
| fadeInLeft | Fade + slide from left |
| fadeInRight | Fade + slide from right |
Slide Animations
| Animation | Effect |
|---|---|
| slideInDown | Slide from top |
| slideInUp | Slide from bottom |
| slideInLeft | Slide from left |
| slideInRight | Slide from right |
Zoom Animations
| Animation | Effect |
|---|---|
| zoomIn | Scale from small |
| zoomInDown | Zoom + from top |
| zoomInUp | Zoom + from bottom |
Bounce Animations
| Animation | Effect |
|---|---|
| bounceIn | Bounce into view |
| bounceInDown | Bounce from top |
| bounceInUp | Bounce from bottom |
| bounceInLeft | Bounce from left |
| bounceInRight | Bounce from right |
Special Entry
| Animation | Effect |
|---|---|
| flipInX | Flip horizontal |
| flipInY | Flip vertical |
| rotateIn | Rotate into view |
| rollIn | Roll into view |
| lightSpeedInLeft | Speed effect |
Exit Animations
Fade Out
| Animation | Effect |
|---|---|
| fadeOut | Fade to transparent |
| fadeOutDown | Fade + slide down |
| fadeOutUp | Fade + slide up |
| fadeOutLeft | Fade + slide left |
| fadeOutRight | Fade + slide right |
Slide Out
| Animation | Effect |
|---|---|
| slideOutDown | Slide to bottom |
| slideOutUp | Slide to top |
| slideOutLeft | Slide to left |
| slideOutRight | Slide to right |
Zoom Out
| Animation | Effect |
|---|---|
| zoomOut | Scale to small |
| zoomOutDown | Zoom + to bottom |
| zoomOutUp | Zoom + to top |
Bounce Out
| Animation | Effect |
|---|---|
| bounceOut | Bounce out |
| bounceOutDown | Bounce to bottom |
| bounceOutUp | Bounce to top |
Animation Settings
Duration
How long the animation takes:
| Value | Speed |
|---|---|
| 200ms | Very fast |
| 300ms | Fast |
| 500ms | Normal |
| 700ms | Slow |
| 1000ms | Very slow |
Delay
Time before animation starts:
Delay: 0ms (immediate)
Delay: 200ms (slight pause)
Delay: 500ms (noticeable pause)
Easing
Animation timing function:
| Easing | Effect |
|---|---|
| ease | Default, natural |
| ease-in | Slow start |
| ease-out | Slow end |
| ease-in-out | Slow start and end |
| linear | Constant speed |
Configuring Animations
Popup Animations
- Go to Design tab
- Find Animation section
- Select Entry animation
- Select Exit animation
- Configure duration
Element Animations
Some elements support animations:
- Select element
- Go to Style section
- Find Animation settings
- Configure hover/transition effects
Attention Animations
Use for drawing focus to elements:
| Animation | Effect |
|---|---|
| bounce | Bouncing motion |
| flash | Flashing visibility |
| pulse | Pulsing scale |
| rubberBand | Stretchy bounce |
| shake | Horizontal shake |
| swing | Swinging motion |
| tada | Attention combo |
| wobble | Wobbling motion |
| jello | Jello-like movement |
| heartBeat | Heartbeat pulse |
Using Attention Animations
Good for:
- CTA buttons
- Important notices
- Interactive elements
- Onboarding hints
Use sparingly to avoid annoying users.
Hover Effects
Button Hover
Common hover animations:
- Color change (transition)
- Scale up slightly
- Shadow increase
- Background shift
Example CSS:
.button {
transition: all 0.3s ease;
}
.button:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
Element Hover
For images and cards:
- Subtle scale
- Shadow increase
- Color overlay
- Transform effects
Transition Effects
CSS Transitions
For smooth property changes:
transition: property duration easing;
transition: all 0.3s ease;
transition: background-color 0.2s ease;
Transition Properties
Common transitioned properties:
opacitytransformbackground-colorbox-shadowborder-color
Animation Best Practices
Performance
- Use transform and opacity — GPU accelerated
- Avoid animating layout — No width/height animations
- Short durations — 200-500ms is ideal
- Reduce on mobile — Simpler is faster
User Experience
- Purposeful — Animation should have meaning
- Not excessive — Don't animate everything
- Consistent — Same animations for same actions
- Respect preferences — Honor
prefers-reduced-motion
Accessibility
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
XBuilder respects reduced motion preferences.
Common Patterns
Modal Entry
Animation: fadeIn or zoomIn
Duration: 300ms
Easing: ease-out
Slide-in Panel
Animation: slideInRight
Duration: 400ms
Easing: ease-out
Floating Bar
Animation: slideInDown
Duration: 300ms
Easing: ease-out
Toast/Notification
Entry: fadeInUp
Exit: fadeOutUp
Duration: 200ms
Matching Entry/Exit
| Entry | Matching Exit |
|---|---|
| fadeIn | fadeOut |
| slideInDown | slideOutUp |
| slideInRight | slideOutRight |
| zoomIn | zoomOut |
| bounceIn | bounceOut |
Troubleshooting
Animation not playing:
- Check animation is selected
- Verify duration > 0
- Clear cache
- Test in different browser
Animation too slow/fast:
- Adjust duration
- Try different easing
- Reduce complexity
Animation janky:
- Use transform/opacity only
- Reduce complexity
- Check device performance
Animation repeating:
- Check animation-iteration-count
- Verify trigger settings
- Look for JavaScript conflicts
Related Settings
- Layout — Position affects animation direction
- Responsive — Adjust animations per device