Floating Effects
The Floating Effects feature in Spexo Addons for Elementor brings a whole new level of creativity to your Elementor page builder. This global option allows you to apply eye-catching floating animations to any Elementor widget, column, or section. You can incorporate Motion Transitions like translate and rotate, CSS transitions such as opacity and background color changes, or Filter Transitions like blur, brightness, and grayscale effects.
In this guide, we’ll demonstrate how to use Floating Effects within Spexo Addons to enhance your website and give your Elementor elements a dynamic, magical touch.
How to Enable Floating Effects #
Head up to your WP Dashboard → Spexo Addons → Widget Settings tab and make sure that Floating Effects feature is enabled.
How to apply Floating Effects #
You can apply the Floating Effects – Spexo Addons to any Elementor element effortlessly. To add these animations to your Elementor elements, follow these simple steps:
First, navigate to your Elementor widget settings → Advanced tab → Floating Effects – Spexo Addons.
Enable Floating Effects: Toggle the switch to turn on floating effects for your selected Elementor element. This will activate the feature, allowing you to customize and apply animations.
The Style and Filters tab options are available in the Spexo Addons PRO plugin.
Motion Floating Effects #
The Motion tab offers floating effects that modify the position of your Elementor element, including options like Translate, Rotate, Scale, and Skew.
Translate Floating Animation #
The Translate floating effect for Elementor allows you to create a smooth transition between two position points. To get started, enable the Translate option in the Motion tab.
- Translate X: Adjust the horizontal position in pixels for Desktop, Tablet, and Mobile devices.
- Translate Y: Adjust the vertical position in pixels for Desktop, Tablet, and Mobile devices.
- Duration (ms): Specify the animation duration in milliseconds.
- Delay (ms): Set the delay time before the animation begins.
Rotate Floating Animation #
The Rotate floating effect for Elementor enables you to rotate an element from one angle to another, measured in degrees. To begin, enable the Rotate option in the Motion tab.
- Rotate X: Define the start and end values for x-axis rotation in degrees for Desktop, Tablet, and Mobile devices.
- Rotate Y: Define the start and end values for y-axis rotation in degrees for Desktop, Tablet, and Mobile devices.
- Rotate Z: Define the start and end values for z-axis rotation in degrees for Desktop, Tablet, and Mobile devices.
- Duration (ms): Specify the animation duration in milliseconds.
- Delay (ms): Set the delay time before the animation initiates.
Scale Floating Animation #
The Scale floating effect for Elementor allows you to create a zoom-in and zoom-out effect, effectively enlarging your Elementor elements. To get started, enable the Scale option in the Motion tab.
- Scale X: Set the values for x-axis scaling animation in pixels for Desktop, Tablet, and Mobile devices.
- Scale Y: Set the values for y-axis scaling animation in pixels for Desktop, Tablet, and Mobile devices.
- Duration (ms): Specify the animation duration in milliseconds.
- Delay (ms): Set the delay time before the animation begins.
Skew Floating Animation #
The Skew floating effect for Elementor allows you to add skew animation to your Elementor element along the x-axis and y-axis. To begin, enable the Skew option in the Motion tab.
- Skew X: Set the values for x-axis skewing animation in degrees for Desktop, Tablet, and Mobile devices.
- Skew Y: Set the values for y-axis skewing animation in degrees for Desktop, Tablet, and Mobile devices.
- Duration (ms): Specify the animation duration in milliseconds.
- Delay (ms): Set the delay time before the animation starts.
Style Floating Effects #
In the Style tab of Elementor Floating Effects, you can apply styling animations such as Opacity and Background Color to enhance the visual appeal of your elements.
Before you begin, make sure that you have installed and activated Spexo Addons PRO plugin on your website.
Opacity Floating Animation #
The Opacity floating effect for Elementor allows you to create a floating animation by adjusting the opacity of your element between two values. To begin, enable the Opacity option in the Style tab.
- Value: Set the start and end opacity values for the animation.
- Duration (ms): Specify the animation duration in milliseconds.
- Delay (ms): Set the delay time before the animation begins.
Background Color Floating Animation #
The Background Color floating effect for Elementor allows you to create an animation by transitioning the background color of your element between two colors. To get started, enable the Background Color option in the Style tab.
- From: Set the initial color for the animation.
- To: Set the final color for the animation.
- Duration (ms): Specify the animation duration in milliseconds.
- Delay (ms): Set the delay time before the animation begins.
Filters Floating Effects #
In the Filters tab of Elementor Floating Effects, you can apply various animations, including Blur, Contrast, Grayscale, Hue, Brightness, and Saturation, to enhance the visual effects of your elements.
Before you begin, make sure that you have installed and activated Spexo Addons PRO plugin on your website.
Blur Floating Animation #
The Blur floating effect for Elementor enables you to create a blur animation by adjusting the blur level of your element between two values. To begin, enable the Blur option in the Filters tab.
- Value: Set the start and end values for the blur filter.
- Duration (ms): Specify the animation duration in milliseconds.
- Delay (ms): Set the delay time before the animation begins.
Contrast Floating Animation #
The Contrast floating effect for Elementor allows you to create a contrast animation by adjusting the contrast level of your element between two values. To begin, enable the Contrast option in the Filters tab.
- Value: Set the start and end values for the contrast filter.
- Duration (ms): Specify the animation duration in milliseconds.
- Delay (ms): Set the delay time before the animation begins.
Grayscale Floating Animation #
The Grayscale floating effect for Elementor allows you to apply a grayscale filter to any element, transitioning it from color to black and white. To get started, enable the Grayscale option in the Filters tab.
- Value: Set the start and end values for the grayscale filter in percentage (%).
- Duration (ms): Specify the animation duration in milliseconds.
- Delay (ms): Set the delay time before the animation begins.
Hue Floating Animation #
The Hue floating effect for Elementor allows you to create a hue animation by adjusting the hue filter of your element between two values. To get started, enable the Hue option in the Filters tab.
- Value: Set the start and end values for the hue filter in degrees.
- Duration (ms): Specify the animation duration in milliseconds.
- Delay (ms): Set the delay time before the animation begins.
Brightness Floating Animation #
The Brightness floating effect for Elementor allows you to create an animation by adjusting the brightness of your element between two values. To begin, enable the Brightness option in the Filters tab.
- Value: Set the start and end values for the brightness filter in percentage (%).
- Duration (ms): Specify the animation duration in milliseconds.
- Delay (ms): Set the delay time before the animation begins.
Saturation Floating Animation #
The Saturation floating effect for Elementor allows you to create an animation by adjusting the CSS saturation filter of your element between two values. To get started, enable the Saturation option in the Filters tab.
- Value: Set the start and end values for the saturation filter in percentage (%).
- Duration (ms): Specify the animation duration in milliseconds.
- Delay (ms): Set the delay time before the animation begins.
General Settings for Floating Effects #
Customize your animation settings with direction, loop, and easing options for full control:
- Direction: Choose how the animation should play.
- Normal: Plays forward by default.
- Reverse: Plays backward.
- Alternate: Plays forward, then reverses.
- Loop: Set whether the animation should loop indefinitely or for a specified number of times.
- Number: Define how many times the animation will run.
- Easing: Control the rate of animation changes over time for smoother transitions.
- Disable Floating Effects On Safari: Option to disable floating effects on Safari to avoid layout issues caused by compatibility with modern CSS animations.
How to Apply Floating Effects Using Custom CSS Selector? #
Basically, CSS custom selector option is used when you need to apply Floating Effect animation on a specific element in your widgets using Custom CSS Selector option in the feature settings. For more clarification please check the below example.
Suppose, we need to apply the floating animation option on a specific element in the widget. We will use Elementor Dual Heading Widget and we will apply Floating Effects to Second Heading.
✓ Steps –
- Head up to Dual Heading widget settings → Advanced tab → Floating Effects – Spexo Addons.
- Switch on Enable Floating Effects.
- In Custom CSS Selector, insert Heading CSS Class (.elementor-heading-title).
After you’ve entered your CSS selector and configured the animation for this element.
How to Get Element CSS Class Using Browser Dev Tools? #
To locate the CSS class for the second heading on your page, follow these steps:
✓ Steps –
- Open Developer Tools: Right-click anywhere on the page and select Inspect from the dropdown menu.
- Select the Element: In the Elements tab of the Developer Tools, navigate through the HTML to find the heading.
- Copy the CSS Class: Once you’ve found the heading, copy its CSS class from the
class
attribute in the HTML. This class can then be used in the Custom CSS Selector option within the Elementor Floating Effects settings.
Final Thoughts #
The Floating Effects feature infuses your content with captivating motion animations, bringing your website to life without requiring any CSS expertise. This tool is invaluable for web designers and creators, enabling you to elevate your pages and engage your visitors effectively. You can also leverage these animations to draw attention to your call-to-action buttons.
We hope this guide has been helpful in showcasing the potential of Floating Effects. Explore the other Global Features available in Spexo Addons to further enhance your design toolkit!
If you require any further assistance, don’t hesitate to reach out to the Spexo Addons support team. We are always happy to help! 🌟
Functional Always active
Preferences
Statistics
Marketing
Subscribe & Download
Enter Your Email Address to Know About the Latest Updates & Features.