The Swirl component

The Swirl component lets you build creatives in an immersive display format with an interactive 3D model. As the ad scrolls into view, the initial 3D animation is tied to the page scroll. Users can interact directly with the model, and expand the ad to full screen to see more.

This component is intended for use in Display & Video 360 Swirl creatives only and is not supported by Microsoft Edge.

To add the Swirl component to your project:

1. Open the Components panel, then the Graphics and effects folder.
2. Drag the Swirl component to the stage.
3. Double-click the component to open the Swirl editing dialogue.
4. Select the 3D model layer in the Layers panel.
5. In the URL field of the Properties panel, browse for the GLB file of the 3D asset that you want to use. You can also adjust other properties (see below).
6. Add layers by dragging image files from your file system to the stage or Layers panel (Windows or Mac only) or by clicking the Import assets button at the bottom of the Library panel. You can only add images as layers in the Swirl component.
7. Position each layer where it should appear at the start and end of the animation using the Start and End tabs. You can drag the layer to where you want it, or use the Start and End position fields in the Properties panel.
8. Set additional configuration options as needed (see below).
9. When you're satisfied with the component (you can preview it as you work on it), click Save. You'll return to the normal Google Web Designer interface.

Configuration options

To configure the component, double-click it on the stage, or select it and click Settings… in the Properties panel.

Add a middle state

For more control over the Swirl component animation, you can add a middle state and change layer properties at that point.

1. Hover to the right of the Start tab and click the button. The Middle tab appears.
2. By default, the middle state occurs halfway between the start and end of the animation. You can adjust the animation timing.
3. Switch to the Middle tab to set layer properties at this point.

To remove the middle state, hover to the right of the Middle tab and click the X.

Change animation timing

The Swirl component's animation timing is determined by how far it has scrolled on to or off the page. By default, animation begins when the component's top edge starts coming into view on the page (0%) and ends when the bottom edge disappears off the top of the page (100%). If you added a middle state, you can also adjust when it occurs during the animation. There are two ways to adjust the animation timing:

• In the Animation timing panel, drag the start, middle and end boxes or slider to the percentage that you want.
• Enter the starting, middle and ending percentages in the fields in the Animation timing panel.

Make the 3D model's background transparent

1. Select the 3D model.
2. In the Properties panel, tick the Transparent 3D model background box.

Add a gesture cue

1. Select the 3D model.
2. In the Properties panel, click the Icon drop-down and either choose an image from the Library, or click Browse… to select an image from your file system.
3. Optionally, enter text to display with the icon in the Text field.

The gesture cue appears over the 3D model to prompt the user to interact with it.

Rotate the 3D model

1. Select the 3D model.
2. In the Properties panel, set the Yaw for the start, middle and end of the animation.

The yaw is the model's rotation around a vertical axis.

Add image layers

There are two ways to add a layer:

• Drag a file from your file system to the stage or the Layers panel (Mac or Windows only).
• Click the Import assets button at the bottom of the Library panel.

New layers in the Swirl component must be images. Only a single 3D model layer is allowed, which is included by default.

Move layers

1. Select the layer that you want to move.
2. Select the Start, Middle or End tab.
3. Position the layer, using one of the following methods:
   • Drag the layer to its new position.
   • Set the Start, Middle or End position properties in the Properties panel. You can only edit the properties that match the current tab. Use the Match start position, Match middle position or Match end position buttons to copy the other position.

Switch to the Start, Middle or End tab to adjust the layer's other position.

Swap images

1. Right-click the image on the stage that you want to switch and select Swap image… from the pop-up menu.
2. Select an image from the Library, or click the Import files button to select an image file from your computer.

The new image replaces the original image. If you previously resized the image that you switched, the new image also uses the resized dimensions. Otherwise, the new image uses its natural dimensions.

Reorder layers

In the Layers panel, drag a layer to its new position in the list.

The order of the layers determines which layers display in front of each other. Layers listed higher appear in front of lower-listed layers.

Delete image layers

1. Select the layer that you want to delete.
2. Click the Delete button at the bottom of the Layers panel.

The 3D model layer is required for the Swirl component and can't be deleted.

Resize layers

1. Select the layer that you want to resize.
2. Resize the layer using one of the following methods:
   • In the Properties panel, set the width and height of the layer. Click the Constrain aspect ratio button to toggle whether the aspect ratio between the width and height is fixed.
   • Drag one of the resize handles at the corners and edges of the layer on the stage.

The layer scales to the specified size for the entire duration of the animation.

Change layer opacity

1. Select the layer that you want to change.
2. In the Properties panel, set the start or end opacity to a value between 0 and 1. (0 is transparent, and 1 is opaque.)

The 3D model layer is always opaque at the end of the animation.

Change layer animation easing

1. Select the layer that you want to change.
2. In the Properties panel, under Advanced properties, select an easing type from the Easing drop-down.

Custom easing isn't available.

Hide and show layers

In the Layers panel, click the box next to the layer thumbnail (under the Hide all layers button).

You can hide or show all layers by clicking the Hide all layers button.

Hiding a layer can make it easier to work on another layer and keeps the hidden layer from appearing in the configuration preview, but it does not affect the browser preview or published creative.

Show and hide ghosts

1. Select an image layer.
2. In the Properties panel, under Advanced properties, click the Show ghost tick box.

The ghost is a translucent version of the layer at the positions you're not currently editing, so you can compare the start, middle and end positions visually. Ghosts are for your reference only and won't show in previews or the published file.

Properties

Swirl component properties

Property	Description
Name	The name of the Swirl component.
Scroll factor	A number between 0 and 1 representing how far the viewer scrolled. Used for display on the Google Web Designer stage only. The default is 0.5.

You can see and edit layer properties when you're in the Swirl editing dialogue and a layer is selected.

3D Model layer properties

Note: Swirl components created before Google Web Designer version 11.0.0 have some different properties for the 3D Model layer.

Property	Description
Name	The name of the 3D Model component.
URL	The GLB source file for the 3D asset. Use the Khronos glTF validator to ensure that your GLB file is valid. For older Swirl components The URL or ID of the 3D asset. Only assets hosted in Poly that have link sharing turned on are supported. The asset file should be 2 MB or smaller in size, as larger assets may fail to load in Google Web Designer. See the 3D Assets Guide for additional requirements. URLs should begin with https://poly.google.com/view/. You can find the ID at the end of the Poly view page URL, e.g. https://poly.google.com/view/0CkCZrXqCWW. Examples: https://poly.google.com/view/0CkCZrXqCWW 0CkCZrXqCWW Refresh assets – you can refresh the 3D asset by clicking this button in the URL field. If you don't see any changes, the asset may still be processing, and you should wait a minute, then try again.
Transparent 3D Model background	(For older Swirl components only.) Tick this box if you want the background of the 3D Model component to be transparent.
Gesture cue
Icon	The image to display over the 3D Model to prompt the user to interact with the model. The gesture cue moves slightly to catch the user's attention until the animation limit is reached, and disappears once the user begins interacting with the model.
Text	The text to display under the gesture cue icon. Only applies if a gesture cue icon is specified.
Set animation limit	Tick this box and set a duration in seconds to limit how long the gesture cue animation lasts.
Position and size
Start	The layer's distance from the left side and top of the Swirl component at the start of the animation. Editable when the Start tab is selected.
Middle	The layer's distance from the left side and top of the Swirl component at the animation's middle state. Editable when the Middle tab is selected.
End	The layer's distance from the left side and top of the Swirl component at the end of the animation. Editable when the End tab is selected.
Size	The width and height of the layer. Affects the layer for the entire duration of the animation.
Rotation
Yaw	The starting, middle and ending rotation of the model around a vertical axis, in degrees.
Style
Opacity	The starting, middle and ending opacity of the layer, represented by a number between 0 (transparent) and 1 (opaque).
Advanced properties
Easing	The easing type for the layer's animation. Custom easing isn't available.

Image layer properties

Property	Description
Source	The image file source. (Non-editable.)
Exit URL	The exit URL when the user clicks the image.
Position and size
Start	The layer's distance from the left side and top of the component at the start of the animation. Editable when the Start tab is selected.
Middle	The layer's distance from the left side and top of the component at the animation's middle state. Editable when the Middle tab is selected.
End	The layer's distance from the left side and top of the component at the end of the animation. Editable when the End tab is selected.
Size	The width and height of the layer. Affects the layer for the entire duration of the animation.
Style
Opacity	The starting, middle and ending opacity of the layer, represented by a number between 0 (transparent) and 1 (opaque).
Advanced properties
Easing	The easing type for the layer's animation. Custom easing isn't available.
Show ghost	When enabled, a translucent version of the layer displays at the inactive position (the position that you're not currently editing).

Events and actions

Events

Events can be used to trigger other actions in your ad. The Swirl component sends the following event:

Event	Description
Swirl loaded	Sent when all assets included in the component are loaded.

To select this event in the Event dialogue, set the Swirl component as the target.

You can also set events and actions for the 3D model that's included in the Swirl component.

Preview

During configuration

You can preview the Swirl component while you're working on it:

1. To enter the component editing mode, double-click the component on the stage.
2. Click the Preview tab at the top.
3. Scroll up and down to see how the visible layers behave in a sample mobile device layout. (Hidden layers won't display.)
4. You can't edit the component while previewing it. Click the Start, Middle or End tab, make your changes, then click the Preview tab again to see those changes.

In the browser

Preview the component in your browser by exiting the component editing mode and using the Preview button in Google Web Designer. The preview page emulates how the ad displays on a web page with enough content for you to scroll above and below the component.

You can select from the following preview mode options:

• Device – Select a mobile device or Custom.
• Rotate device – switch between portrait and landscape.
• Viewport size – If you select Custom for the device, you can set a new size by editing this field or dragging the preview's resize handles.

Swirl ads always use the Parallax preview mode in the browser.