Flip Everything

“Flip Everything” is perfect for showcasing your products or services, displaying key features of your business, or presenting any other type of information in a visually engaging way. With its customizable settings and powerful capabilities, this element is a must-have for anyone looking to create dynamic and eye-catching flip boxes in their website.

One of the great advantages of “Flip Everything” is that it’s a Nestable Element, meaning that you’re not limited to adding just static text to your flip boxes. Instead, you can add any type of content you like - from images and videos to buttons and forms - and create truly dynamic and engaging flip boxes.

Settings

General Settings

Setting	Description
Global Width	Set the width of the flip box.
Global Height	Set the height of the flip box.

For these two settings, you can choose between pixels, percentage, or viewport units. You can also set the width and height of the flip box for each breakpoint individually.

Animation Settings

Setting	Description
Animation Type	Choose between different animation types: Flip, Fade, Fade Shrink, Fade Up, Overlay, Overlay Shrink. When the flip box is flipped back, the animation will be reversed.
Animation Trigger	Choose between different animation triggers: Hover, Click
Duration	Set the duration of the animation in seconds. Default: 1
Delay	Set the delay of the animation in seconds

Developer Settings

In addition to its customizable settings, “Flip Everything” also includes Developer Settings that allow developers to add custom events and functionality to their flip boxes. With the ability to use custom events like onStart, onComplete, and onReverseComplete, developers can create even more powerful and dynamic flip boxes that engage and delight visitors.

Here are the Developer Settings included in “Flip Everything”:

Setting	Description
On Start	Add custom JavaScript code that will be executed when the animation starts.
On Complete	Add custom JavaScript code that will be executed when the animation completes.
On Reverse Complete	Add custom JavaScript code that will be executed when the animation is reversed.