[PLUGIN] - RG Animation

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

Animation

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.

    Animation2


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.

  1. The “animation name” seen in orange should go into the “animation name” field so copy that section.

  2. The actual animation part of it, seen in yellow should go into the “animista class” field so copy that section.

  3. 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

7 Likes

Love your work @pork1977gm :+1: :+1: :+1:

1 Like

Top notch plug in and documentation!

Looking forward to it.

Now available :slight_smile:

EDIT: App is working now, the culprit was that my setup was too spread out and as a result, bubble wasn’t loading the elements fast enough for the plugin.

I’ve upgraded the majority of my pages/reusable to the new engine and placed them all together as close to the main page as possible. Many thanks to @pork1977gm for going the extra mile and helping problem solve.

Love this plugin but after making some changes to my app, it’s no longer working. My app isn’t set up traditionally, so that might play a role.

The plugin is super smooth so if there’s any way I can get it to work, that would be great.

My Set Up

(OE) = Old Engine
(NE) = New Engine

Main Page (OE)
=> Group of Content (OE)
=>Reusable Element (OE)
=>Inside RE: Another Reusable Element (NE)
=>Group (NE)
=>(RGAnimationA)
=>Repeating Group (NE)
=>Reusable Element (OE)

RGAnimation is placed inside the reusable element with the Repeating Group in it.

Unique IDs are very basic like “rg1”

There are also Repeating Group inside of Reusable Elements inside of Repeating Groups, and these guys have the plugin too, but it also doesn’t work.

Plugin was working fine until I started dabbling in all this New Engine, Old Engine Hybrid stuff.

1 Like

Ok, thanks for letting us know.

Can you do us favour, send us a screenshot of it not working but can you have the dev tools open with the console tab showing. There may be an error in there. Or if you have a URL to this page then I can check it too. I’ll try and replicate your scenario and see if I can find the error.

check dms