How would you recreate this animation (example included)

I’m trying to recreate the following, but get a very jittery experience:

For the purple screen, I’ve created this as a Group (Group Main) that takes 100% of the height/width.

For the Sign Up / Log In white screens I’ve created them as floating groups (let’s say FloatingGroup A and FloatingGroup B)

On click of a button e.g. Log In, I’m running the following workflow:

  1. Animate Group Main - TransitionNoBounceLeftOut - Duration 3000ms

  2. Animate FloatingGroup A - TransitionNoBounceRightIn - Duration 1500ms

The FloatingGroup A animation seems to happen happen really quickly at the start, and then jerkily speed up to finish. There also appears to be some transparency of the two layers, not sure why???

Bump… :slight_smile:

Hi, it is very hard to explain how to solve this challenges.
If possible, I can access the editor page, I can help you.

Thanks for offering to help!

I’ve made a playground:

Editor: p-playground | Bubble Editor
Demo: Bubble | No-code apps
(note you need to resize your browser down to mobile)

I had also wanted to send Params to the URL, but had removed this [reluctantly] as it was resulting in a page refresh - if you know how to implement a smooth transition with sending params to URL, that would be ideal

You forgot to change the access settings.
I got this error:
User does not have permission to view this document

Apologies, fixed

1 Like

These two videos have two different animations. Which one exactly do you want?

I made the same as the first video for you, of course, because there was no content for the next page, it is now empty.
When you put content, if you encounter a problem, tell me so that I can fix it, there is a trick for that.

Wow thanks so much! Am I correct in saying you achieved this through setting states and setting transition duration on width and margin changes?

1 Like

you’re welcome.
Yes, the use of workflow animations cannot be customized, you can create all kinds of animations with the states and settings of your element.

For a more complex example, look at this animation for the theme change icon in the corner of the page.

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.