Home » Tutorials » How to Use the Floating Effect Elementor Extension By Master Addons
The Floating Effect Elementor extension from Master Addons allows you to add smooth, interactive animations to any element on your website. With simple customizations like translation, rotation, and scaling, you can create subtle floating motions or dynamic 3D effects.
In this tutorial, we’ll explore how to use these customization options to bring your elements to life, and show how the Positioning Extension can help fine-tune placement for the perfect look. By the end, you’ll be ready to create eye-catching floating animations for your site.
Before getting into the options of the floating effects you must ensure that the extension is enabled.
Just go to Master Addons on your dashboard. Go in to the extensions tab and toggle the Floating Effects extension. Simple!
After you’ve enabled it, you can navigate to the advanced tab of any element on your site and scroll down to find the “floating effects” extension. Toggle it and, you will see the following customization options.
1. TranslateThis allows you to move an element along the X and Y axes. By adjusting the translation on the X axis, the element will move left and right. Similarly, adjusting the Y axis moves the element up and down. Combining both axes creates a 3D floating effect, adding depth and motion to your elements.
2. RotateWith this option, you can rotate elements along the X, Y, and Z axes. This gives your elements a more dynamic, spinning effect.You can also adjust the duration and delay of the rotation, allowing for smoother or more dramatic transitions.
3. ScaleThe scale effect lets you stretch or shrink an element along the X and Y axes. This creates a grow/shrink animation, making your elements appear to expand or contract. As with the other effects, you can adjust the duration and delay to control the timing of the animation.
By combining these three customization options, you can create endless variations of floating effects, from subtle movements to more complex, eye-catching animations.
We recommend you to check out Elementor Pro features as well. You can combine Elementor pro and Master Addons to create any type of website you want.
One of the most powerful features of the Floating Effects extension is the ability to combine translation, rotation, and scaling for unique and dynamic animations. By layering these effects, you can create anything from subtle floating motions to full 3D interactive elements.
Combine Translate and Rotate: Pairing translation with rotation creates a fluid, spinning effect with movement across the screen. For instance, you can have an element float diagonally while rotating in place for a more dynamic, 3D illusion.
Combine Translate and Scale: Using both translation and scaling allows an element to move and change size at the same time. This can create an expanding or shrinking floating effect as the element drifts across the screen.
Combine All Three: For the ultimate floating effect, combine translate, rotate, and scale. This allows for complex animations where the element moves, spins, and grows/shrinks all at once, giving it an engaging, multi-dimensional appearance.
The possibilities are endless when you experiment with these combinations. Play around with different values for duration and delay to adjust the speed and timing, creating a truly custom floating animation for any element.
We hope, by now you know how to tweak the different settings for the Floating Effects extension.
As a bonus we’ll show you how to create an awesome section with some images, the Floating Effects and Positioning Extensions:
You can follow the video below where we show you the complete process.
First off, pick lets pick some images we’ll use to create our section.
Then, we add a full width Flexbox or grid for 3 columns and 2 rows and arrange all images like the following screenshot inside the appropriate boxes.
Now, let’s focus on Position and Floating Effect. We recommend starting with positioning. Carefully review your design and position all images and particles precisely before implementing the floating effect.
We’ve utilized the Master Addons positioning extension to accurately position the images. To begin, select ‘Relative’ within the position extension. Then, proceed to align your images or any other elements as needed.
We have completed the positioning for all images, and the attached screenshot illustrates the current arrangement.
Finally, let’s apply the floating effect to the desired images. We’ve applied translate X and Y effects to the images in the first and third columns. The Rotate Z effect has been applied exclusively to the profile picture. Please refer to the following GIF file to see the current visual outcome.
The Floating Effects extension offers endless possibilities for animating elements on your website. With simple yet powerful customization options for translation, rotation, and scaling, you can create dynamic, eye-catching floating effects that engage visitors. When combined with the Positioning Extension, you have full control over both the movement and placement of elements for a truly customized design.
Don’t be afraid to experiment with different settings and combinations to find the perfect floating effect for your site. With a little creativity, you can elevate your web design and create a more interactive user experience.
If you face any problem with this extension, feel free to comment here or contact us via our Website contact form.