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.

Flip Everything

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

  • 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

  • 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”:

  • 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.