How to Set an Animation Effect on Your Flip Box

Adding an entrance animation to your flip box takes just a few seconds. Once set, your cards will animate into view the first time a visitor scrolls down to them — a great way to add visual polish to your page.

Step-by-Step: Setting an Animation

1. Open your flip box in the Flipbox editor.
2. In the settings panel, locate the Animation section (sometimes labeled “Oxilab Animation” or found within general settings).
3. Click the Animation Type dropdown.
4. Browse or scroll through the list of 103 animations and select the one you want.
5. Set the Animation Duration (how long the animation plays in seconds — e.g., 0.8 for 0.8 seconds).
6. Click Save.

Previewing Your Animation

To preview how the animation looks:

1. Save the flip box after choosing your animation.
2. Go to the page where the flip box is displayed on your website.
3. Scroll up so the flip box is out of view, then scroll back down to it.
4. The entrance animation will fire as the flip box comes into the viewport.

Note: Animations trigger via scroll detection (Waypoints). They will fire once when the element enters the viewport. Refreshing the page and scrolling down again will replay the animation.

Removing an Animation

To remove the entrance animation from a flip box:

1. Open the flip box in the editor.
2. In the Animation Type dropdown, select None or leave it blank/empty.
3. Save the flip box.

With no animation selected, the flip box will simply appear as the page loads without any entrance effect.

Animation Duration

The duration setting controls how long the animation takes to complete, measured in seconds.

• 0.3–0.5s: Quick and snappy (modern, minimal feel)
• 0.6–0.8s: Balanced and smooth (most popular choice)
• 1.0–1.5s: Slow and dramatic (cinematic feel)
• 2.0s+: Very slow (use sparingly; can feel sluggish)

For most use cases, a duration between 0.6s and 1.0s gives the best balance between noticeable and not overly long.

Common Mistakes to Avoid

• Using “Out” animations for entrances – Animations like fadeOut, zoomOut, or bounceOut are exit animations. If applied as entrance animations, the card will appear briefly and then disappear. Always use “In” animations for entrances (fadeIn, zoomIn, bounceIn, etc.).
• Animation too slow – A duration over 2 seconds can feel sluggish and frustrate users. Keep it under 1.5s in most cases.
• Too many dramatic animations – If you have multiple sections on a page each using dramatic animations (rubber band, tada, wobble), the page feels chaotic. Pick one subtle animation style and use it consistently.

Do Animations Work on Mobile?

Yes — entrance animations work on mobile devices. On touch screens, the animation fires when the flip box scrolls into the visible area, just like on desktop. The flip effect itself is triggered by a tap on mobile instead of a hover.