The Parallax component

Use the Parallax component to create the illusion of depth with layers of images. As the viewer scrolls the page up or down on a mobile device, the foreground and background images move at different speeds.

animation of scrolling to a Parallax ad

This component is intended for use in Display & Video 360 Parallax creatives only.

To add the Parallax component to your project:

Open the Components panel, then the Interaction folder.
Drag the Parallax component to the stage.
Double-click the component to enter the component editing mode.
Add layers by dragging image files from your file system to the stage or Layers panel (Windows or Mac only), or by clicking the Add images button at the bottom of the Layers panel. Only images can be added as layers.
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. You can also add a middle state by hovering to the right of the Start tab and clicking the button.
Set additional configuration options as needed.
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.

Parallax Overview

Configuration options

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

Add layers

There are two ways to add a layer:

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

Layers in the Parallax component must be images.

Move layers

Select the layer you want to move.
Select the Start, Middle, or End tab. (You can add a middle state if you haven't done so already.)
Position the layer, using one of the following methods:
- Drag the layer to its new position.
- Use the arrow keys to move the layer one pixel at a time. Hold the Shift key while pressing an arrow key to move the layer 10 pixels in that direction.
- Set the Start, Middle, or End position properties on the Layer properties tab. 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 another tab to adjust the layer's position at another point in the animation.

Swap images

Right-click the image on the stage that you want to swap out and select Swap image... from the pop-up menu.
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 swapped out, 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 layers

Select the layer you want to delete.
Click the Delete button at the bottom of the Layers panel or press the Delete key.

Resize layers

Select the layer you want to resize.
In the Layer properties panel, set the width and height of the layer in pixels.
- Click the Constrain aspect ratio button to toggle whether the aspect ratio between the width and height is fixed.

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

Change layer opacity

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

Change layer animation easing

Select the layer you want to change.
In the Layer properties panel, select an easing type from the Easing dropdown.

Custom easing isn't available.

Add a middle state

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

Hover to the right of the Start tab and click the button. The Middle tab appears.
By default, the middle state occurs halfway between the start and end of the animation. You can adjust the animation timing.
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 Parallax 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 you want.
Enter the starting, middle, and ending percentages in the fields in the Animation timing panel.

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 has no effect on the browser preview or published creative.

Show and hide ghosts

Select a layer.
In the Layer properties panel, under Advanced properties, click the Show ghost toggle.

The ghost is a translucent version of the layer at whichever 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 in the published file.

Properties

Component properties

Component properties are visible in the Properties panel. (You must exit the component editing mode.)

Property	Description
Name	The name of the Parallax 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.

Layer properties

You can see and edit layer properties when you're in the component editing mode.

Property	Description
Name	The name of the layer. (Non-editable.)
Start	The layer's distance from the left side and top of the component when the component first comes into view (i.e., the component's top edge is at the bottom edge of the viewport), measured in pixels or as a percentage. 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, measured in pixels or as a percentage. Editable when the Middle tab is selected.
End	The layer's distance from the left side and top of the component when the component is about to pass out of view (i.e., the component's bottom edge is at the top edge of the viewport), measured in pixels or as a percentage. 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.
Opacity	The start and end opacity of the layer, represented by a number between 0 (transparent) and 1 (opaque).
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 inactive positions (positions that you're not currently editing).

Events

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

Event	Description
Parallax loaded	Sent when the component is ready for display.

Preview

During configuration

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

To enter the component editing mode, double-click the component on the stage.
Click the Preview tab at the top.
Scroll up and down to see how the visible layers behave in a sample mobile device layout. (Hidden layers won't display.)
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 webpage containing 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.

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

Was this helpful?

How can we improve it?