Is it possible to animate an element's or group's position?

Need help
1

Hi,

I’m hoping to control the position of elements on the page per an event or state. Animating between the positions would be ideal.

For example, to slide the page content when you open a sidebar (as opposed to sidebar coming in as an overlay), or having specific elements in the header update position when other elements change.

I do see the ability to add animation presets to elements (these seem to presume position like transitioning between pages) and also the ability to update borders and background properties in Conditionals and Transitions.

Is there an option to update element / group position that I’m missing - or - some fancy workaround to emulate the same effect currently?

Thanks!

Edit: updated GIF to be less seizure inducing.

1 Like
2

You can slide downwards by having a hidden group, and setting it to animate when it appears…

See here … Click “New Block”.

https://buildingonbubble.com/

But not sideways using that function.

You might be able to do it by hiding/showing groups and using “Animate” in a workflow.

6 Likes
3

Thanks Nigel!

I’ll play around with combining groups and workflows and hopefully bring some knowledge back.

2 Likes
4

@clayton any news on this? Im planning to do the same.
In theory we could now move position with some jquery animations. What do you think?

5

Can i see your editor for this Nigel?

6

There are 3 ways that I know to do this (from simplest to most complex):

  1. You can set groups (and only groups) to collapse when hidden and animate the close/open transition (what Nigel mentioned)

  2. You can use workflows on an element to “Animate” an element (e.g., slide right in, slight left out). These are available within the workflow actions, under category “Element Actions” option “Animate”

    blob.jpg619×561 48.7 KB

  3. You can create borders that are set to be invisible that transition to a different width (on the conditions tab) which makes the element seem like it moves across the page. Details and example here: Move image position with workflow - #16 by sridharan.s

7 Likes