- Open the page in the Elementor editor.
- Select the Ultimate Flipbox widget.
- Open the Content tab.
- Expand Layout Settings.
- Locate Animation Type.
- Open the Animation Type selector.
- Choose the animation effect you want to use.
- Preview the front-to-back transition.
- Click Update to save the page.
- For a Post Flipbox or Story Flipbox, select that widget and follow the same steps using its available controls.
Check dependent controls before finishing
Animation Direction is available only for 3D Flip, 3D Flip Classic, Slide, 3D Diagonal Flip, Skew, 3D Fold, 3D Door, 3D Cube, and Fill Reveal. It is not configured to appear for None, Fade, Zoom, or Curtain. 3D Depth appears only when you choose 3D Flip. Static Front Side defaults to No and is offered only for Zoom, Slide, 3D Fold, and Curtain. These conditions are why a control may disappear after you change the effect.
Preview the effect and compare the result
Check whether the animation keeps titles, descriptions, and buttons readable. Avoid choosing an effect only because it looks dramatic in the editor; confirm that visitors can understand the transition and access the back-side content on the published page, including on touch-sized screens.
Screenshot to add: the selected widget’s Content → Layout Settings panel with Animation Type expanded and the full list of effect names visible. This is a placeholder, not a captured screenshot.
Screenshot to add: a before-and-after or two-state preview of one selected animation, showing the card’s front and back clearly. This is a placeholder, not a captured screenshot.
Related animation settings
For supported effects, see Set the Flip Direction. To adjust the 3D Flip effect, read Configure 3D Flip Depth. You can also configure click interaction or change the transition duration.
Return to Animations and Interaction for the full guide collection.