Flip Box Animation Not Working: Troubleshooting

If the entrance animation on your flip box isn’t playing when you scroll to it, there are several common causes to check. This guide walks you through each one.

Note: This guide covers the entrance animation (the scroll-triggered animation that plays when the section comes into view). If the flip effect itself on hover isn’t working, see the section below.

1. No Animation Selected

The most obvious — and most common — reason the animation isn’t playing is that none has been selected.

1. Open the flip box in the Flipbox editor.
2. Find the Animation settings section.
3. Check the Animation Type dropdown — is an animation selected?
4. If it’s blank or set to “None”, choose an animation from the list (e.g., fadeInUp).
5. Save the flip box.

2. You’re Using an “Exit” Animation

Animations like fadeOut, zoomOut, or bounceOut are exit animations. When applied as entrance animations, the card briefly appears and then disappears.

Always use “In” variants for entrance animations: fadeIn, zoomIn, bounceIn, slideInUp, etc. Change the animation to an “In” type and save.

3. JavaScript Not Loading (Waypoints)

The entrance animation relies on the Waypoints JavaScript library to detect when the flip box enters the viewport. If this script isn’t loading, the animation will never trigger.

1. Open your site in a browser.
2. Right-click → Inspect → Console tab.
3. Look for JavaScript errors referencing waypoints or similar.
4. Also check the Network tab and filter by JS — look for waypoints.min.js and confirm it loaded with a 200 status (not 404).

If there’s a JavaScript conflict, try deactivating other plugins one by one while retesting until the conflict is identified.

4. Caching Serving Old Page

If you just added or changed the animation setting, a caching plugin may be serving the old, unanimated version of the page.

1. Clear your site cache (in your caching plugin settings).
2. Test the page in an Incognito / Private browser window to bypass browser cache.
3. Scroll past the flip box, then scroll back up and down past it again.

5. Animation Already Fired and Won’t Repeat

Entrance animations fire once per page load when the element enters the viewport. Once triggered, they won’t replay unless you refresh the page.

To replay the animation for testing: refresh the page fully (Ctrl+Shift+R / Cmd+Shift+R), then scroll down to the flip box.

6. Page Optimization Plugins Blocking Scripts

Some performance plugins (Autoptimize, WP Rocket, LiteSpeed Cache with JS deferral, etc.) can defer, minify, or block JavaScript in ways that break the Waypoints library.

Try these steps:

• Temporarily disable your optimization/caching plugin and check if animation works
• In your optimization plugin settings, look for an option to exclude waypoints.min.js from deferral or minification
• Alternatively, exclude the Flipbox scripts folder from optimization

The Flip Effect on Hover Isn’t Working

If the cards aren’t flipping when hovered (as opposed to the entrance animation not working), check these:

• CSS not loading – The flip effect is CSS-driven. If the Flipbox CSS files aren’t loading, the flip won’t work. See Flip Box Not Showing on Frontend for how to diagnose CSS loading issues.
• On mobile – Flip effects are triggered by a tap on touch devices, not hover. Test on a desktop browser to confirm the hover works there.
• Theme CSS conflict – Some themes include aggressive CSS resets or transforms that can interfere with the 3D flip effect. Test with a default theme to confirm.