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
On a blank app page, create a Reveal animation design.
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 🚀
💾 Example files
Duplicate the files below to see how to set it up!
Last updated
Was this helpful?