Page reveal animations

Refers to an animated effect where content or elements gradually become visible on the screen, often in response to a user interaction.

👉 The Tag

Add a tag to set up a specific transition to open an app page.

📍 Where to add the tag: A top-level app page.

🏷️ How to add the tag

1. On a blank app page, create a Reveal animation design.

2. Use the tag that you prefer the most for your reveal animation.

Contract

Use this tag:

[animation:contract:light]
[animation:contract:medium]
[animation:contract:heavy]

Fade in

Use this tag:

[animation:fadein:light]
[animation:fadein:medium]
[animation:fadein:heavy]

Spin

Use the follow tag:

[animation:spin:light]
[animation:spin:medium]
[animation:spin:heavy]

Expand

Use this tag:

[animation:expand:light]
[animation:expand:medium]
[animation:expand:heavy]

Slide left

Use this tag:

[animation:slideleft:light]
[animation:slideleft:medium]
[animation:slideleft:heavy]

Slide right

Use this tag:

[animation:slideright:light]
[animation:slideright:medium]
[animation:slideright:heavy]

Slide top

Use this tag:

[animation:slidetop:light]
[animation:slidetop:medium]
[animation:slidetop:heavy]

Slide bottom

Use this tag:

[animation:slidebottom:light]
[animation:slidebottom:medium]
[animation:slidebottom:heavy]

Now you can do the prototyping! Your reveal animation is ready to use. Import to Bravo & preview on Bravo Vision 🚀

Designers and developers use various techniques and frameworks to implement reveal animations, ensuring they contribute positively to the overall user experience.

💾 Example files

Duplicate the files below to see how to set it up!

https://www.figma.com/community/file/938435282064183751/bravo-sample-page-reveal-animationswww.figma.com