Floating Effects allow you to add bouncing effect or floating effect of any element .If you want to add some bouncing effects or want to float any elements in your website, you have to add some deep-level CSS coding. It’s too difficult and time consume for many of us.
To reduce the pain we have launched a Floating Effects in our Enter Addons for Elementor. Here is a quick video guideline on how you can create a bounce effect with our Floating effect:
Using Floating Effects:
You can see the below video to get an insight into how you can use Floating Effects, Or you can follow the documentation whichever you find convenient.
Step1
At first, In the ‘Floating Effects’ menu of the Advanced tab, you will get the Floating Effects Feature. From there you can activate the feature. After activating the feature you will get 4 more options, Translate, Rotate, Scale, and Skew.
These 04 features will help you to make your design animation. The meaning of these functions are as follows,
- Translate – It allows you to bouncing animation of an element x-axis or y-axis.
- Rotate – You can rotate of your element from the x-axis to the y-axis
- Scale – This allow you to creating a zoom in and out bouncing animation
- Skew – With this function, you can enlarge of any element from x-axis to y axis.
Step2
Now click the Translate section. Here you will get 4 more sections with measuring tools. By which you can manage your animation effects. The parameter of the measuring tools is PX ( Pixel ). There is a center point and you can control the range of the animation effect by dragging the arrows in the right of the left side from the center point.
The Meaning of these features,
- Translate X – To create a bouncy effect based on X-axis
- Translate Y – To create a bouncy effect based on Y-axis
- Duration – To set the animation speed ratio, how fast it will animate.
- Delay – To set the interval time between your animation loop.
You will get the same type of options in the rest of the features, Rotate and Scale and Skew. The prefix will be changed accordingly.
Translate Animation Effect
Here is a way how you can manage this section.
Rotate Animation Effect
This is how you can rotate animation any element,
Scale Animation Effects
Here is a way how to use the scale animation effcts,
Skew Animation Effects
Here is a way how to use the skew animation feature,
Final Step
After getting your desired animation click on Update and publish it.
Or
If you feel to restart again there is a reset button on every section of our effects. You can reset to your default design with a single click.
