Skip to main content
← Design & Bravo Tags
Design & Bravo Tags June 6, 2022 · 7 replies

Problem visualizing transitions in Vision iOS

Archived from the Bravo community forum (2021–2026). Some answers may refer to older versions of Bravo.

Hi, I'm having problems with transitions in Vision iOS. 
I'm working on a simple app for a local shop. It's my first Bravo project so I choose a simple project where I can do some experiments and learn the best practices.
The first round was to build the first pages and so, for example, I learned that iOS and Android in  Bravo Vision use slightly different font dimensions and positioning. So I find ways to make my layout more elastic and adaptable.

Then I proceeded to transitions and here comes the problem that I've not yet solved. 
On very simple pages, transitions work perfectly in Vision, on both iOS and Android. If pages become more complex (or at least this is my diagnose of the problem since it happens on the home page) transitions are not visible on iOS, while Android still works. On iOS I only get an instant switch between pages.

My questions are:

  1.  is this a known misbehaviour? I've tried to simplify the Home, bringing it down to 3 containers, but the problem remains...
  2. Could be that the cause is a bug in Vision for iOS?
  3. Thsi problem remains even in the final exported app? Or is it something that I can reassure my clients about?

Right now, still doing experiments while writing this post, I'm seeing a transition:push:left  effect on a page which has not this tag at all! That's funny and at the same time makes me nervous ;)
I'm a web designer since 25+ years and I'm pretty accustomed to unreliabel behaviour, from CSS, HTML or else. I understand them and I don't fear them, my only need is to know if I'm the only one seeing those and if you can help me in some way.
Thanks!

7 replies

Bastos June 6, 2022

Transitions in Figma don’t work with bravo. The only transitions you can use are those supported by Bravo which you can find in the documentation or in the Master Tag List.

Enrico June 6, 2022

Hi Bastos, it is clear to me. I’m using Bravo tags.
I’ve tried once with figma trasitions at first, then I read the docs, removed figma transitions and inserted the tags.
This is the reason they work on Android as I wrote,if it wasn’t the case, not even Android would have worked :)
By the way, I’ve scheduled a session with Bravo on Wednesday morning to understand what’s wrong.

Bastos June 7, 2022

That's weird.. never had this problem. Hope it will be fine

Michael June 8, 2022

Can you let us know what they say? The transitions aren't working for me on iOS bravo vision either.

Enrico June 8, 2022

Hi Michael, looks like it's a bug in Vision. They update it often, in some cases once a week, and probably in the last iOS version a bug has run free. Customer care told me they'll try to correct the issue in the next release, so stay tuned.

Enrico June 9, 2022

Final update on this subject, especially for and  
Yesterday the support team wrote me to tell me that this bug is –  unfortunately – not a bug.

On iOS, transitions are  disabled when they are TOWARD a page which is in the app menu. The reason is that, if a page is in the menu, it's a top level page and some UI rules (maybe the Apple Human Interface Guidelines, not sure) requires that top level pages have no entrance animation.
I tried it and it works. In the moment the page is removed from the menu, the entrance animation is active. 

Honestly, I would like to have the final control on it, and I hope that they will include this feature also on iOS. I could decide to put in the menu a second or third-level page (for example, a temporary direct link to a donation or patreon page) and loosing, for this reason, the entrance animation is not nice.  
Also, this limit should definitely be noted somewhere in the docs. 
Maybe in the Bravo tags list, so everyone knows that it's not a bug (I've lost some hours trying to make it work and when customers get crazy on a product is never a good thing).

On the positive side, this limit is a hint to apply some UI/UX best practice that I never considered. 
In the end, probably I can remove the menu from my app without  damaging the UX, and this is what I'll do. The app is pretty simple and I've only secondary pages, directly connected to the home page 

Hope it helps!
Enrico

Brice May 3, 2024

@Bastos Must be written in the Doc too clarify.
“Transitions in Figma don’t work with bravo. The only transitions you can use are those supported by Bravo which you can find in the documentation or in the Master Tag List.”

Wrote something in this thread and want it removed? Request removal

Still stuck?

Ask the community on Discord

This archive is read-only. New questions, office hours and product updates now happen in the Bravo Discord.

Join the Discord