Back to contents

JetElements. How to use Animated Box’s Switch Type and Animation Effect options

useful information

From this tutorial you will learn what switch types and animation effects are available in the Animated Box widget and how you can use them.

JetElements Animated Box allows presenting information in a catchy manner. Enrich a flip box with needed content and serve it with a special animation effect. You will attract visitors’ attention 100 percent.

Using different switch types and animation effects

You can see all accessible switch types and animation effects and select the appropriate ones in the Content > Settings block of Animated Box’s settings in Elementor. It is possible to combine a preferable switch type and animation trick according to the result you want to get.

animated-boxs-settings

There are 6 switch types, such as Hover, Click, Toggle Button, Scratch, Paper Fold,Peel and Slide Out. Animation Effect option provides a lot of effects grouped in Simple, Zoom, Pool, Slide and 3D blocks.

useful informationNOTE!
You can apply one of the animation effects only for Hover, Click and Toggle Button switch types.

We are going to present examples, which demonstrate how switch types and some animation effect look in action.

If you select the Hover switch type and Flip Horizontal 3D animation effect, you will get such the outcome:

hover-flip-horizontal-3d

Choosing the Click switch type and Zoom In animation effect, it will be showed in this way:

click-zoom-in

In case you pick the Toggle Button switch type and Pull Left animation effect, you will see:

toogle-button-pull-left

Applying interactive switch types

Display information in more stylish and extraordinary way using special, interactive switch types available in the Animated Box widget. You will draw your users’ attention in a few seconds.

Enable the Scratch switch type and the back side of a flip box will appear if you scratch the front one.

scratch switch type

The Peel switch type allows switching the sides of the animated box in such an interactive manner:

peel switch type

The Slide Out switch type in combination with Bottom direction will be presented on the frontend like this:

slide out switch type

As you can see, there are many customizable switch effects and animation tricks in the Animated Box widget. You just need just to determine which one meets your needs and apply the required adjustments.