Hi all,
Another plugin, this one is designed to add a little more flare to your repeating groups.
It allows for your cells within a repeating group to animate when they appear and disappear off the page (or move in and out of the viewport). The plugin itself contains a combination of 3 well-known libraries known as Stroll, AOS and Animista in order to provide a rather lengthy list of animations to choose from. It also enables you to create your own types of animations if needed.
It’s also possible to target specific cells using the cell indexes if you only wanted to animate some.
Demo page:
https://paul-testing-4.bubbleapps.io/rg_animation_vertical
Editor:
https://bubble.io/page?type=page&name=rg_animation_vertical&id=paul-testing-4&tab=tabs-1
Plugin page
https://bubble.io/plugin/rg-animation-1667158209397x832745960866316300
Note: The demo page has more than your average number of repeating groups being shown!*
In reality, animations will become a lot smoother when you have less on the page.
Limitations
Now, there are some limitations with this plugin, and before I go into any details, you should probably be aware of them since this may not be suitable for all.
It’s designed to work mainly with vertical groups. Whilst horizontal repeating groups will still animate, they only do so when you’re using the scroll types 2 option.
Within the plugin options, are two different types to choose from, scroll types 1 and 2.
Scroll Types 1 uses AOS and Animista functionality.
Scroll Types 2 uses Stroll functionality.
Each are better suited for different setups. These are the current limitations right now, which will get worked on in future updates.
-
Scroll Types 1 - will not work with horizontal repeating groups, it only supports vertical scrolling repeating groups. -
Scroll Types 2 - will not work on Bubble's old responsive pages. -
Scroll Types 2 - requires the 'show all items immediately' option to be checked. -
Scroll Types 2 - Doesn't allow for a mix of horizontal and vertical scrolling repeating groups on the same page.
Now that’s out the way, here’s the documentation.
ELEMENTS
RG Animation
This element needs to be placed somewhere on your page. It’s not visible when you preview your page, but it is required for the functionality to work.
-
Attribute ID
This is the given attribute ID which you have set on the repeating group. -
Disable Scroll (vert)
This will disable the vertical scroll bar on the repeating group. Vertical scrolling will be disabled entirely when this is set to Yes. This can be useful when an unwanted scroll bar appears. -
Disable Scroll (horiz)
This will disable the horizontal scroll bar on the repeating group. Horizontal scrolling will be disabled entirely when this is set to Yes. This can be useful when an unwanted scroll bar appears. -
Hide scroll bars
This will hide any scroll bars on the repeating group but still keep scrolling active and affects both vertical and horizontal scroll bars. -
Target cell index
When a value is presented here, accepts single or a comma separated list of numbers (as a text string), only the specific cell index’s will be animated. Leave empty to animate all cells, applies to both scroll types.
-
SCROLL TYPES 1
Below are the settings for this section, plus a few additional enhancements. The animations here come from the AOS and Animista libraries. These work best when the repeating group is set to utilise the full page height. Having a fixed size repeating group with a scroll bar will still work, but you need to set the 'Enable Int. Observer' option to Yes. The 'Scroll Types 2' section further down is better suited for this scenario. -
Enable Scroll Types 1
Select Yes to enable the animations from AOS. -
Animation
Select the type of animation here. -
Additional Animation
An alternative list of animations which derive from the Animista library. Selecting an option from this dropdown will override any animations selected above. -
Custom Animation
If you want to apply some custom animation, you can do by setting this option to Yes and using the fields below to supply the CSS. When this is in use, the previous animation fields above will be ignored. You can use any of the animations from https://animista.net/ where the CSS code is generated for you. See the demo page for further instructions on this option (scroll to the bottom of the page). -
Animation (name)
This needs to be the animation name that is referenced in the CSS (class section) below. -
Animista (class)
This field has been added so you may paste the CSS “class” code from any animation at https://animista.net/. Only the attributes are required, not the class selector. -
Animista (keyframes)
This field has been added so you may paste the CSS “keyframes” code from any animation at https://animista.net/. The entire keyframes section can be pasted into this field. See the demo page for further instructions on this option. -
Anchor Placement
This gives you control over the position in which the animation starts. By default, it sets the start position as soon as the top reaches the bottom part of the window. -
Easing Function
These settings control the timing function which specifies the speed curve of the animation, it enables you to control and vary the acceleration of an animation that defines where the animation speeds up and slows down over the specified duration. -
Duration
This is a predefined duration for which the animation should last for. To use this option, your value must be between 0 to 3000, with step 50ms. -
Delay
The amount of time in which you want your animation to be delayed for. To use this option, the value must between 0 to 3000, with step 50ms. -
Offset
This is an offset (in px) from the original trigger point. -
Once
Animations by default are always replayed each time they’re scrolled into view or out of view. Setting this value to No will allow the animation to happen only once. -
Mirror
Whether elements should animate out while scrolling past them. -
Debounce Delay
Advanced option - The delay on debounce used while resizing window. -
Throttle Delay
Advanced option - The delay on throttle used while scrolling the page. -
Enable Int. Observer
Advanced option - This enables an intersection observer to animate cells within a fixed height repeating group. This can have a slight effect on performance, so only use if needed.
-
SCROLL TYPES 2
Below are the available settings to use with this feature. Only pages which run on Bubble's newer responsive engine are supported with this. The animations here come from the Stroll library and is a better choice when you have fixed height/horizontal repeating groups. -
Enable Scroll Types 2
Select Yes to enable the animations from Stroll. -
Animation
Select the type of animation here. -
Is Vertical
If you’re using a horizontal repeating group, then set this value to No. Note: If you have multiple plugin elements on the page, this setting must be the same for all of them. Unfortunately, you can’t mix and match vertical/horizontal repeating groups on the same page whilst using this type because of how things work under the hood. This might be supported in the future.
ACTIONS
- Apply new custom animation
Applies a new custom animation to a repeating group.
tings.
-Animation (name)
-This needs to be the animation name that is referenced in the CSS (class section) below.
-Animista (class)
-This field has been added so you may paste the CSS “class” code from any animation at https://animista.net/. Only the attributes are required, not the class selector.
-Animista (keyframes)
-This field has been added so you may paste the CSS “keyframes” code from any animation at https://animista.net/. The entire keyframes section can be pasted into this field. See the demo page for further instructions on this option.
Custom Animations
Go to https://animista.net/ and find an animation to use, as shown below.
Then click on the code button which is the arrow to the far right.
There are 3 sections here we need to take the info from and put into the correct fields within the plugin.
-
The “animation name” seen in orange should go into the “animation name” field so copy that section.
-
The actual animation part of it, seen in yellow should go into the “animista class” field so copy that section.
-
The whole of the keyframes part, the green section can be copied entirely into the “animista keyframes” field.
Dynamically, it would look something like this.
Enjoy! and any questions, just ask.
Paul
