This plugin enables smooth, looped animations within a container, such as image carousels or scrolling banners, and allows pausing of the animation when the user hovers over the container. It automatically resumes the animation once the hover ends. The speed of the animation can be easily controlled through the plugin's properties, providing a fluid experience for users with smooth transitions.
Features: Seamless Animation: Creates a continuous animation that scrolls or moves content horizontally or vertically.
Custom Speed: Control the animation speed using the speed property.
Hover Pause: Pause the animation when the user hovers over the container, and resume once the hover ends.
Looping: The animation can be set to loop indefinitely.
Responsive Design: Automatically adapts to the size of the container.
Add the Plugin to Your Bubble App:
Go to your Bubble editor and navigate to the "Plugins" tab.
2. Set Up the Container: Drag and drop a Group or Container element into your page, which will hold the content that you want to animate (e.g., images, text, etc.).
Give this container a unique ID (in the properties panel) that will be used to identify it in the plugin.
3. Configure the Plugin: Add the plugin element to your page.
In the plugin's settings, set the following properties:
Element ID: Enter the unique ID of the container you set earlier.
Speed: Set the desired animation speed (in milliseconds). A higher value means slower animation.
Orientation: Choose whether the animation will scroll horizontally (right, left) or vertically (down, up).
Loop: Enable or disable the loop feature. If enabled, the animation will restart once it finishes.
Pause on Hover: Enable this to pause the animation when the user hovers over the container.
4. Customizing the Animation: To make the animation work best for your content, ensure that the elements inside the container are properly styled and sized to fit within the container’s bounds.
5. Test the Animation: Preview your page and test the animation. Hovering over the container will pause the animation, and moving the cursor away will resume the animation at the defined speed.
Types
This plugin can be found under the following types:
Built on Bubble
