3. Supporting graphics elements

Create a component set for each graphics element, with one variant for the "hidden" state and one or more for the "shown" state.

🟥🖥️ Logo and computer graphics

Select the logo element and duplicate, then create a component set out of the pair. Create the new "Shown" variant property and set as False for the first variant True for the second. Change the opacity of the child element to 0% to hide, then establish a connection.

Interaction properties

Don't worry about the after-delay duration, we'll set that in the last step.

Repeat process for computer element

Follow same steps as above to create interactive component for the computer element. Rename the components to match the final design.

🌠 Star graphics

Create a separate component set for each star pattern, each with five variants.

Modify the size and rotation to create the "twinkling" effect and set the opacity of the first and last variant to 0%, since it transitions our of view before the screen wipe effect occurs.

Then establish connections between the variants and set the interaction properties below.

Note: Here we won't set the "Shown" true/false property since we have a series of variants, and we'll just use the Default "Property 1" value as the hidden element.

Interaction properties

Apply the properties below to all four component interactions. We'll circle back in the last step and change the after-delay duration of the first transition along with all all the other elements.

Repeat process for second star element

Follow same steps as above to create interactive component for the second star element. Rename the components to match the final design.