# Page reveal animations ## 👉 **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. ![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2Fgm5BCrx3LkyG6fILUuh5%2FScreen-Recording-2024-03-11-at-11.39.07.gif?alt=media\&token=438ed6f2-2ef4-4a4f-8363-815083b1ef04) ## 🏷️ **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] ``` ![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2Flc9ctAoPbqtTW59CB0B4%2FReveal%20animation2.jpg?alt=media\&token=6a6e9165-36cf-4ad1-a2c1-0bd93f7c37f7) ### Fade in Use this tag: ``` [animation:fadein:light] [animation:fadein:medium] [animation:fadein:heavy] ``` ![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2F2BNAeKzBfX7pITNDuaft%2FReveal%20animation3.jpg?alt=media\&token=9674aa41-2203-453b-9eb2-89ec9749940f) ### Spin Use the follow tag: ``` [animation:spin:light] [animation:spin:medium] [animation:spin:heavy] ``` ![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2Fzisj7ZOLk9ui6M56zaEA%2FReveal%20animation4.jpg?alt=media\&token=5fef35ed-a6e4-40cb-9177-8f8201fcba3e) ### 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] ``` ![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2F498y0pA8eulYMpTKuYqf%2FReveal%20animation6.jpg?alt=media\&token=f85daa43-6da0-4d9c-8006-43887018f1ee) ### 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 🚀

{% hint style="info" %} Designers and developers use various techniques and frameworks to implement reveal animations, ensuring they contribute positively to the overall user experience. {% endhint %} ## 💾 Example files Duplicate the files below to see how to set it up! {% embed url="" %}