The Transition Gallery component

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

The Transition Gallery component

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 neighboring 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 dialog 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 you want in the gallery into the Frames panel at the bottom of the dialog, 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. Customize the transition duration, easing, and other properties (described below).

To reorder gallery images:

1. Open the Transition Gallery dialog 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 dialog by double-clicking the component on the stage or clicking Settings... in the Properties panel.
2. Select the image or images 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 dialog 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 dialog. To open the dialog, 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: Left to right (default) Right to left Top to bottom Bottom to top Stripe: Left to right (default) Right to left Top to bottom Bottom to top Bottom left to top right Top left to bottom right Bottom right to top left Top right to bottom left Door: Opening (default) Closing Radial: Clockwise (default) Counter-clockwise
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 color, from 1-10. Defaults to 2.
Color (available if Style is Stripe)	The color 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-20. Defaults to 5.
Reveal transparent background	Check 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-20. Defaults to 5.
Reveal transparent background (available if Style is Regular)	Check 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)	Check 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) Counter-clockwise

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-20. The default is 5.
Columns	The number of columns, from 1-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 dialog. 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).
Autoplay
Autoplay	When checked, 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 Autoplay is checked.
Repeat	The number of times to play through the frames in the gallery, with 0 indicating infinite looping. Only applies if Autoplay is checked.
Interaction
Wrap	When checked, 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 checked, 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 checked.
Enable interactive transition	When checked, the transition animation follows the user's mouse. Only available if the Gesture property can be set to Swipe.*
Navigation
Include	When checked, the gallery displays navigation bullets (when previewing in a browser or in published files).
Thumbnails	When checked, the gallery displays a thumbnail of each frame for navigation.
Highlight	Sets the highlight color 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
Autoplay ended	Sent when autoplay 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 dialog, 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 autoplay	Start from current frame
Stop	none
Go forwards	none
Go backwards	none

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

Learn how to configure events.

Preview

While you're in Design mode of the Transition Gallery dialog, 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 autoplay and interaction options.

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