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!

Last updated