Overview of Flip Box Animation Effects
The Flipbox plugin includes 103 animation effects that bring your flip box sections to life. When a visitor scrolls down to your flip boxes, the animation triggers — making the cards bounce, fade, zoom, rotate, or slide into view in a variety of creative ways.
These are entrance animations — they play once when the flip box scrolls into the visitor’s viewport. They are separate from the flip effect itself (which happens on hover).
How Entrance Animations Work
Flipbox uses the Waypoints JavaScript library to detect when your flip box scrolls into view. When that threshold is crossed, the chosen animation fires — giving visitors a polished, dynamic first impression of your content.
This is different from the hover-triggered flip. Here’s a quick summary:
| Effect Type | When It Triggers | What It Does |
|---|---|---|
| Entrance Animation | When the section scrolls into view | Cards animate in (bounce, fade, zoom, etc.) |
| Flip Effect | On mouse hover (or tap on mobile) | Card flips to reveal the back face |
Animation Categories
The 103 animations are organized into the following categories:
Attention Seekers (11 animations)
These animations grab attention with eye-catching movement. Use sparingly — they’re best for highlighting something important.
- bounce, flash, pulse, rubberBand, shake, headShake, swing, tada, wobble, jello, heartBeat
Bounce In / Out (10 animations)
Cards enter or exit with a bouncy, elastic motion. bounceIn and bounceInUp are popular choices for energetic, playful brands.
- bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp
- bounceOut, bounceOutDown, bounceOutLeft, bounceOutRight, bounceOutUp
Fade In / Out (18 animations)
Smooth, elegant fade-in animations. fadeIn and fadeInUp are the most versatile and commonly used animations, they add elegance without being distracting.
- fadeIn, fadeInDown, fadeInLeft, fadeInRight, fadeInUp (and “Big” variants)
- fadeOut, fadeOutDown, fadeOutLeft, fadeOutRight, fadeOutUp (and “Big” variants)
Flip (5 animations)
The card itself flips in the specified axis as it enters the page. Creates a 3D flip entrance effect.
- flip, flipInX, flipInY, flipOutX, flipOutY
Light Speed (2 animations)
Cards rocket in or out from the side at high speed with a slight skew. Energetic and dramatic.
- lightSpeedIn, lightSpeedOut
Rotate In / Out (10 animations)
Cards spin in from a corner as they enter. Creates a dynamic, creative entrance.
- rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight
- rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight
Zoom In / Out (10 animations)
Cards scale up from a small size or zoom in from a direction. zoomIn is clean and modern — a great default for most websites.
- zoomIn, zoomInDown, zoomInLeft, zoomInRight, zoomInUp
- zoomOut, zoomOutDown, zoomOutLeft, zoomOutRight, zoomOutUp
Slide In / Out (8 animations)
Cards slide in smoothly from a specific direction. slideInUp works particularly well for cards in a grid layout.
- slideInDown, slideInLeft, slideInRight, slideInUp
- slideOutDown, slideOutLeft, slideOutRight, slideOutUp
Special Effects (4 animations)
Unique animations for creative use cases.
- hinge, jackInTheBox, rollIn, rollOut
Choosing the Right Animation
Here are some recommendations based on site tone and use case:
| Site Tone | Recommended Animations |
|---|---|
| Professional / Corporate | fadeIn, fadeInUp, zoomIn |
| Creative / Agency | flipInX, rotateIn, lightSpeedIn |
| Fun / Playful | bounceIn, bounceInUp, tada, jackInTheBox |
| Elegant / Luxury | fadeIn, slideInUp, zoomIn |
| Tech / SaaS | zoomInUp, fadeInUp, slideInLeft |
Pro Tip: When in doubt, use fadeInUp or zoomIn. These are the most widely used entrance animations on professional websites because they’re noticeable but never distracting.
To see how to apply an animation, see How to Set an Animation Effect. For a full list of every animation name, see Complete List of Available Animations.