New Plugin - CSS Animations

Hey everyone,

we’ve just released a new plugin: CSS animations.

This plugin allows you to add more than 40 css animations to Bubble elements such as groups, texts, shapes, images and more! You can either trigger an animation within a workflow or set a recurring animation on an element. You can use this plugin to enhance the user experience of your application and make your pages more dynamic.

For a demo please visit: https://3dimage.bubbleapps.io/s

Plugin Page: https://bubble.io/plugin/css-animations-1584201257400x605852502193340400

Stay safe!

5 Likes

How will it handle big groups with 5-10 repeating groups full of content?
I have a problem of low FPS with bubbles build in animations on big groups with lots of stuff on them.
I’m looking for a plugin that would give me a more native mobile feel to my app.

1 Like

Hey Wojtek,

yes it should work fine. We’ve just created a demo showcasing individual texts within a repeating group : https://3dimage.bubbleapps.io/repeatinganimation

You will just have to generate a dynamic id attribute for each element within the repeating group, for example using the current cells unique id. You can then trigger the animation of a specific element within the repeating group by specifying the unique id.

I’ve just bought your plugin and I’ve notice that there is no option to change duration of the animation.

Maybe I’m missing something in UI and this option is in there somewhere?

Hey @wojtek ,

yes there is no option to change the duration. All animations have a fixed duration.

My bad as I didn’t ask about the duration option. So probably won’t work for what I needed it for :frowning:.

I have a single view app, and animation will only work right when the group is fully loaded. I have a master group filled with different repeating groups (up to 6 with lots of pic and text) converted to reusable elements.
Either animation won’t work when it is before Show group or when I’m firstly Show group and then run animation not all the data will be loaded.

1 Like

Started to use it with condition “Do when …” nad It might work for my purpose :slight_smile:

1 Like

Ok we should have mentioned that there is no duration option.

We hope it works for you :+1:

I’m trying to get your plugin to work for showing/hiding whole screen groups (one page app). With bubble build in animations it’s working ok. But I don’t know how I can incorporate your plugin into my workflow instead.

When I use show group before animation it just not animating. When I use animation first then show there is no animation on screen.

Could you let me know how can I overcome this?

Hello wojtek,

I’ve just looked into that, but it seems we cannot override the show/hide workflow from Bubble. I tried to create a third element action that shows + animates an element but unfortunately could not get it to work.
I’ll let you know if we find a solution.

Understand.

I’ve noticed that when I put animation first and pause workflow action after but before show group it’s sometimes working. Check that.

  1. Ok when I try to show again group that was used with your animation it won’t show.

My workflow is: Animation on group A > Pause 1ms > Show on groups B
Then when I want to go back: Animation on group B > Pause 1ms > Show on groups A

Group A won’t show up again. I’ve tried to add hide to group A but still not working.

  1. Rotate Left is different kind animation from Rotate Right animation :frowning: . They are not same but left/right, those are different animations.

  2. If I understand you are using https://www.minimamente.com/project/magic/ library. You might think to put all the animations there :slight_smile: for example you have only 3 animations from space (2 ins, 1 out).

  1. Hmm that’s weird. As you mentioned we are using the magic library and are using the rotate left and rotate right animations from this library. I’ve just checked and it’s set up correctly from our end.

  2. Yes you are right, we are using this library. We had some issues implementing some animations in bubble so we didn’t use all of them.