Animating Page Transitions in Single Page Apps

I do not like how bad the “Animate when collapsed” slide animations are. It squeezes child elements and can lag badly when the component is complex. The cleanest animations come from the “Animate” workflow action since they animate the entirety of the element.

Here are the annoying parts:

  1. Bubble does not expose “X element is visible is yes/no” expression in when setting expressions in a workflow action
  2. Setting this up cleanly can be a wee bit confusing. You might end up with tons of “Do When Condition Is True” which IMO is horrible to troubleshoot

I created a sample of this setup for my own reference and just wanted to share with the community.

Editor | Preview

Feel free to share your methods for handling element transitions!

1 Like