The Transition Gallery component

This component is not supported for AMPHTML ads, video ads or image ads.

The Transition Gallery component lets you display images in succession, animating the transition between images.

Choosing the right gallery

Google Web Designer has four different gallery components:

• The 360° Gallery shows images of different sides of an object, letting you swipe back and forth to rotate the object. The 360° Gallery doesn't show groups or navigation elements.
• The Swipeable Gallery has a simple, flat look, and lets you swipe through images or groups either vertically or horizontally.
• The Carousel Gallery is similar to the Swipeable Gallery, but gives neighbouring images a three-dimensional look, as if they were on a rotating display.
• The Transition Gallery offers a range of animation effects while switching from one image to the next.

To use the Transition Gallery:

1. Open the Components panel, then the Galleries folder.

2. Double-click the Transition Gallery component, or drag it to the stage.

3. Double-click the component or click the Settings… button in the Properties panel. The Transition Gallery dialogue opens.

4. The Library panel on the left displays images that you can include in the gallery. To add images, click the Import assets button at the bottom of the panel, or drag in images from another window.

5. Drag the images that you want in the gallery into the Frames panel at the bottom of the dialogue, or on to the stage. To add multiple images from the Library, you can also select them all, then right-click the selection and select Add.

6. Select the transition type in the Transition panel.

7. Customise the transition duration, easing and other properties (described below).

To reorder gallery images:

1. Open the Transition Gallery dialogue by double-clicking the component on the stage or clicking Settings… in the Properties panel.
2. In the Frames panel on the bottom, drag an image to its new position.

To remove a gallery image:

1. Open the Transition Gallery dialogue by double-clicking the component on the stage or clicking Settings… in the Properties panel.
2. Select the image or images that you want to remove in the Frames panel on the bottom.
3. Either press the Delete key, or right-click the selection and select Delete from the pop-up menu.

To swap a gallery image:

1. Open the Transition Gallery dialogue by double-clicking the component on the stage or clicking Settings… in the Properties panel.
2. Right-click the image in the Frames panel and select Swap image from the pop-up menu.

Properties

You can access properties for this component in the Transition Gallery dialogue. To open the dialogue, double-click the Transition Gallery on the stage, or click Settings… in the Properties panel.

Transition types

A different set of properties is available depending on the transition type.

None

There's no visual transition effect between frames.

Fade

The old image fades out of view to reveal the new image.

Property	Description
Duration	The duration of an animation from one frame to the next, in seconds. Defaults to 1.
Easing	The easing of the transition animation. Linear (default) Ease-in Ease-out Ease-in-out

Push

The new image slides into view while pushing the old image out of view.

Property	Description
Style	Regular	Split
Duration	The duration of an animation from one frame to the next, in seconds. Defaults to 1.
Easing	The easing of the transition animation. Linear (default) Ease-in Ease-out Ease-in-out
Direction (available if Style is Regular)	The direction of the effect. Left to right (default) Right to left Top to bottom Bottom to top
Orientation (available if Style is Split)	The orientation of the animation. Horizontal Vertical (default)

 

Wipe

The new image gradually replaces the old image along a moving line or lines.

Property	Description
Style	Regular	Door	Iris
	Radial	Stripe
Duration	The duration of an animation from one frame to the next, in seconds. Defaults to 1.
Easing	The easing of the transition animation. Linear (default) Ease-in Ease-out Ease-in-out
Direction (available if Style is Regular, Stripe, Door or Radial)	The direction of the effect. Available options depend on the style: Regular or Stripe: Left to right (default) Right to left Top to bottom Bottom to top Door: Opening (default) Closing Radial: Clockwise (default) Anticlockwise
Angle (available if Style is Regular)	The angle of the wiping line in degrees, from -89 to 89.
Orientation (available if Style is Door)	The orientation of the animation. Horizontal Vertical (default)
Origin (available if Style is Iris or Radial)	The X and Y origin of the iris or the sweeping radius, as a percentage of the gallery frame.
Stripes (available if Style is Stripe)	The number of stripes of each colour, from 1 to 10. Defaults to 2.
Colour (available if Style is Stripe)	The colour of each stripe.

 

Slice

The new image is revealed in slices or bars which slide into view one after another.

Property	Description
Duration	The duration of an animation from one frame to the next, in seconds. Defaults to 1.
Easing	The easing of the transition animation. Linear (default) Ease-in Ease-out Ease-in-out
Direction	The direction of the effect. Left to right (default) Right to left Top to bottom Bottom to top
Slices	The number of slices, from 1 to 20. Defaults to 5.
Reveal transparent background	Tick this box to show a transparent background before transitioning to the new image, rather than overlaying the old image.

Blinds

The new image is revealed as though from behind window blinds.

Property	Description
Style	Regular	Venetian
Duration	The duration of an animation from one frame to the next, in seconds. Defaults to 1.
Easing	The easing of the transition animation. Linear (default) Ease-in Ease-out Ease-in-out
Direction (available if Style is Regular)	The direction of the effect. Left to right (default) Right to left Top to bottom Bottom to top
Orientation (available if Style is Venetian)	The orientation of the animation. Horizontal Vertical (default)
Blinds	The number of blinds, from 1 to 20. Defaults to 5.
Reveal transparent background (available if Style is Regular)	Tick this box to show a transparent background before transitioning to the new image, rather than overlaying the old image.
Staggered (available if Style is Venetian)	Tick this box if the blinds should transition one after another, instead of simultaneously.

Rotate

The old image starts to spin while zooming in, then zooms back out on the new image while completing the spin rotation.

Property	Description
Duration	The duration of an animation from one frame to the next, in seconds. Defaults to 1.
Easing	The easing of the transition animation. Linear (default) Ease-in Ease-out Ease-in-out
Direction	The direction of the effect. Clockwise (default) Anticlockwise

Zigzag

The new image is gradually revealed in a snaking grid pattern.

Property	Description
Duration	The duration of an animation from one frame to the next, in seconds. Defaults to 1.
Easing	The easing of the transition animation. Linear (default) Ease-in Ease-out Ease-in-out
Orientation	The orientation of the animation. Horizontal (default) Vertical
Rows	The number of rows, from 1 to 20. The default is 5.
Columns	The number of columns, from 1 to 20. The default is 5.

Transition Gallery properties

Property	Description
Name	The name of the Transition Gallery component.
Images	The images displayed in the gallery. Make changes in the Frames panel of the Transition Gallery dialogue. Can be bound to dynamic data.
Scaling	Determines how various sized images are displayed within the fixed frame size. Learn more. Resize image to fit Crop image to fill None Stretch image to fill
Start frame	Which frame you want to display initially (1 being the first frame).
Auto-play
Auto-play	When ticked, automatically plays through the frames in the gallery. The total time it takes to play through the entire gallery is displayed in the Frames panel when this option is enabled.
Interval	How long each frame is visible, in seconds. Only applies if Auto-play is ticked.
Repeat	The number of times to play through the frames in the gallery, with 0 indicating infinite looping. Only applies if Auto-play is ticked.
Interaction
Wrap	When ticked, allows navigation from the last frame to the first.
Gesture	The user gesture that changes the current frame in the gallery. None Click (default) Swipe (only available for some transition types*) In addition to the selected gesture, users can use navigation bullets if you enable them, or any custom navigation controls that you set up using events.
Ignore reverse swipe	When ticked, the component doesn't respond to swipe gestures in the opposite direction of the animation effect, so the user can't navigate to the previous frame. Only applies if the Gesture property is set to Swipe and Enable interactive transition isn't ticked.
Enable interactive transition	When ticked, the transition animation follows the user's mouse. Only available if the Gesture property can be set to Swipe.*
Navigation
Include	When ticked, the gallery displays navigation bullets.
Thumbnails	When ticked, the gallery displays a thumbnail of each frame for navigation.
Highlight	Sets the highlight colour for the currently displayed frame.
Advanced
Exit URLs	A comma-separated list of exit URLs, one for each frame. Can be bound to dynamic data.

 

* Swipe support

The following transition types and styles support swiping:

• Push – Regular
• Slice
• Wipe – Regular
• Wipe – Stripe
• Blinds – Regular

Events and actions

Events sent by the Transition Gallery component

You can trigger other actions based on the following Transition Gallery component events:

Event	Description
Auto-play ended	Sent when auto-play has ended for any reason. If it ended naturally by reaching the intended loop count, event.detail.completed will be true; otherwise, it will be false.
Frame activated	Sent when a new frame has started to be activated, even if it's not yet visible.
Frame shown	Sent when a new frame is shown.
Frame tap	Sent when the user taps on a frame.
Rotate once ended	Sent when rotation has ended for any reason. If it ended naturally, event.detail.completed will be true; otherwise, it will be false.
Left end	Sent when the gallery reaches its left end.
Right end	Sent when the gallery reaches its right end.

To select one of these events in the Event dialogue, set the Transition Gallery component as the target.

Actions performed by the Transition Gallery component

The following Transition Gallery component actions can be triggered in response to other events:

Action	Configuration options
Go to frame	Frame number Animate
Rotate once	Start from current frame
Start auto-play	Start from current frame
Stop	none
Go forwards	none
Go backwards	none

When you select one of these actions in the Event dialogue, set the Transition Gallery component as the receiver.

Find out how to configure events.

Preview

While you're in Design mode of the Transition Gallery dialogue, you can click the Play button in the Frames panel to see how the basic transition looks, starting from the currently selected frame. You can modify properties while the preview is playing to see the changes take effect immediately.

Switch to the Preview tab to see how the Transition Gallery works with the properties you set, including auto-play and interaction options.

You can also preview your document in your preferred browser by clicking Save in the dialogue, then clicking the Preview button.