The Floating Effects extension in Wow Elements allows you to add smooth floating and motion animations to your website elements without any coding. It helps create interactive and visually engaging designs by making sections, images, icons, or widgets move dynamically on the screen. With flexible customization controls and animation settings, you can easily enhance the creativity and user experience of your Elementor website. In this documentation, we will guide you through how to use and customize the Floating Effects extension in Wow Elements.
Enabling the Floating Effects Extension #
To use the Floating Effects Extension from Wow Elements Pro, first, you have to enable the extension.
- Go to WordPress dashboard → Wow Elements Plugin dashboard.
- Then, Click the Extension Tab.
- Search the Floating Effects Extension Name.
- Enable the Floating Effects Extension.
- Hit the Save Settings Button
Initial Setup for Floating Effects Extension #
Before using the Floating Effects extension, you first need to create or select an existing design where you want to apply the extension. Here, we have create a design to show you the example.
Where To Find Floating Effects Extension #
1. To find the Floating Effects Extension, you must need to select the element where you want to use the extension.
2. Now, move to Advanced Tab of the selected widget.
3. Here, you will find the default Motion Effects.
4. Now inside the Motion Effects section, you will find the Floating Effects.
Configuring the Floating Effects Extension #
1. Translate: With this option you can move the element from one position to another along the X and Y axes, creating a smooth floating or shifting animation effect. Let’s see what we can customise with this Translate option –
- Translate X – You can move the element horizontally (left to right) with this option.
- Translate Y – You can move the element vertically (up and down). Note: The From → To values define the starting and ending position of the movement.
- Duration – This option controls how long the animation will take.
- Delay – You can set how long it waits before starting with this option.
Preview of Translate Option #
Now, let’s get back to configuring the Floating Effects Extension. This time we will discuss about the Rotate option –
2. Rotate: You can add a rotation animation to the element along different axes, creating a 2D or 3D spinning effect. Let’s see what we can customise with this Rotate option –
- Rotate X – This option allows you to rotate the element along the horizontal axis (tilts it forward or backward in 3D).
- Rotate Y – This option allows you to rotate rotate it along the vertical axis (spins it side‑to‑side in 3D).
- Rotate Z – This option allows you to rotate rotate it normally from the front (standard clockwise or counterclockwise spin).
(Note: From → To sets the starting and ending rotation angles.) - Rotate Infinite – Enable the switcher to make the rotation loop continuously with this option.
- Duration – This option controls how long the rotation will take.
- Delay – You can set how long it waits before starting.
Preview of Rotate Option #
Now, let’s get back to configuring the Floating Effects Extension. This time we will discuss about the Scale option –
3. Scale: This option allows you to animate the size of the element, making it grow or shrink smoothly.
- Scale X – You can make changes the width (horizontal size) from the “From” value to the “To” value.
- Scale Y – You can make changes the height (vertical size) from the “From” value to the “To” value.
- Duration – This option controls how long the rotation will take.
- Delay – You can set how long it waits before starting.
Preview of Scale Option #
Now, let’s get back to configuring the Floating Effects Extension. This time we will discuss about the Skew option –
4. Skew: This options allow you to animate the element by slanting or distorting its shape along the X or Y axis.
- Skew X tilts the element horizontally (left or right), shifting the top and bottom edges.
- Skew Y tilts it vertically (up or down), shifting the left and right edges.
- Duration – This option controls how long the rotation will take.
- Delay – You can set how long it waits before starting.
Preview of Skew Option #
Now, let’s get back to configuring the Floating Effects Extension. This time we will discuss about the Border Radius option –
5. Border Radius: You can animate the corner as roundness of the element over time with this option.
- Start and End (From → To) – You can set the initial and final corner radius values, changing the shape from slightly rounded to more circular with this option.
- Duration – You can control how long the shape transition will take with this option.
- Delay – You can set how long it waits before starting the animation.
Preview of Border Radius Option #
Now, let’s get back to configuring the Floating Effects Extension. This time we will discuss about the Opacity option –
6. Opacity: You can control the transparency animation of the element how it will be visible during the effect with this option. You can make changes to –
- Start – You can set the initial transparency level with this option.
- End – You can set the final transparency level with this option.
- Duration – You can control how long it takes to transition from the start opacity to the end opacity.
Preview of Opacity Option #
Now, let’s get back to configuring the Floating Effects Extension. This time we will discuss about the Easing option –
7. Easing: This option control the speed style of the animation — how it starts, moves, and ends instead of moving at a constant speed. You will find some options and you can choose any of those that meet your expectation.
All done, You have successfully customised the Floating Effects Extension on your website.
Video Assist #
You can also watch the tutorial video about the Floating Effects Extension. Please visit the demo page for examples.
Thanks for staying with us.
