Group slide animation

Have you guys at bubble thought about adding slide animation to group elements?

I’m not sure if it would be hard or easy to implement but it would really allow us to make sleek, animated web and mobile apps.

I’m thinking about a slide animation that happens to the elements inside a group element, when something is clicked or data changes.
It would be nice to be able to slide things (not entire windows but a specific group) in any direction, with a speed we set.

Any thoughts on that?

3 Likes

This is also something I’m waiting for. Adding this in the Features Labs would get it on their radar if it already isn’t in the works.

2 Likes

This is something that we’ve been having on our mind for a while, haven’t really found the best way though. Can you share a link of an example of an animation you like? Like, there are a ton of options, many being cheesy, so it’d be nice to have something real to talk about it.

4 Likes

I did some research and here are my favorites:

Bounce.js: http://goo.gl/GCW5Bv
I really like the their preset: Jelly, Swoosh, Fold&Unfold.
Especially if I would be able to set the parameters for bouncing, and speed.

Another one that looks easier to implement:
http://anicollection.github.io/#/
I really like all of their animations.

And this one:
http://daneden.github.io/animate.css/

After seeing these animations I think it would be great if we could use these not just for group elements but every time we hide or show an element, it could be a text, button, shape or anything else.

1 Like

I love the “hinge” in the “Specials” section.

1 Like

Thanks, will check it out. How would you have that triggered though? i’m trying to think within our editor. It’s not really something you want in a workflow right?

3 Likes

I think it should work the same way as currently the animations for native apps.

In the workflow, when I add a ‘show’ or ‘hide’ action there should be a drop down menu showing the available animations, right below where you choose which element to show/hide.

And it would be nice to have a new action called ‘animate’ that can be used in workflow which would allow us to animate an element that is already visible, without showing or hiding it,it would be very useful with animations that makes a button bounce around but not appear or disappear.

See attention_seekers animations at http://anicollection.github.io/#/ , these animations could be triggered with the new ‘animate’ action.

And personally my final vote would be this collection: http://anicollection.github.io/

The hinge is really cool as well as the others.

How about this one http://julian.com/research/velocity/#uiPack ? a bit easier for us to add, as we already use velocity. Search for “Effects: Pre-Registered”

1 Like

I miss a few really cool ones but it would be definitely a lot better than nothing, especially if it can be added quickly.

1 Like

Well can’t commit on ‘quickly’, but it’s on our list.

2 Likes

So we actually had a productive Friday :slight_smile:

Check this out

You’ll see how that works. Also, read this https://bubble.io/reference#Actions.AnimateElement

To use with caution, can lead to cheesy design pretty quickly :stuck_out_tongue:

9 Likes

whoah this is awesome!!

Amazing!!!
You guys are great!

Awesome!!!

I’m speechless! :heart_eyes:

That was a classy act! Bravo! :clap:

1 Like

Cool!

1 Like

Slick

1 Like

This is cool, Thanks