Want to make it pop? The Pop-up (window) component allows you to display more information on a state as it's playing. You can use it to get users to switch to a full-screen display, to give them information tied to a specific element or for any other use you may think of!
1. Editing the pop-up (window)
Click on the Pop-up icon in the Component menu and find all options in the Properties window.
- Edit pop-up: your pop-up is made of states. By clicking on this button, you can create and manage different states (also available by double-clicking on this component). You can add an independent state or a dependent one. Not sure what a state is? Read create animations with states.
User interaction: this option allows your user to enjoy all the features of this component (here, automatically launch the pop-up). By default, this option is always checked. If you uncheck this option, your users won’t be able to see the pop-up launch automatically.
Background: lets you define a background color
Options: to configure the Background blur and its radius.
Default state: use this to select the state that will be displayed when the pop-up loads. If you don't define anything and you return to the pop-up, it will continue to show the state that was last displayed.
Note: for now on, a pop-up window is displayed only in full-screen mode. But we’re fine-tuning this to let you choose how big you want it and where you want it to appear – stay tuned!
2. Creating interactivities
By default, this pop-up is automatically opened when the user taps the transparent zone: it's that simple! And it's closed when the user taps the screen again (no need to define a specific interactivity).
However, based on our users' feedback and to make things easier for those not 100% familiar with tablets, we recommend you also insert a cross at the top-right of the window and make it interactive, associating a Single Tap trigger with the action Define actions on a component(pop-up) / Close pop-up.
If you haven’t learned about actions on components yet, check out the article Create an interactive action.
Exception: if you've inserted an HD Zoom component in the pop-up, then it won’t be able to close automatically, because your user actions will be impacting the image, not the pop-up.
To close it, you'll need to create a specific action associated with the closing action (see above).