This component is not supported for AMPHTML ads, video ads, or image ads.
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:
-
Open the Components panel, then the Galleries folder.
-
Double-click the Transition Gallery component, or drag it to the stage.
-
Double-click the component or click the Settings... button in the Properties panel. The Transition Gallery dialog opens.
-
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.
-
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.
-
Select the transition type in the Transition panel.
-
Customize the transition duration, easing, and other properties (described below).
To reorder gallery images:
- Open the Transition Gallery dialog by double-clicking the component on the stage or clicking Settings... in the Properties panel.
- In the Frames panel on the bottom, drag an image to its new position.
To remove a gallery image:
- Open the Transition Gallery dialog by double-clicking the component on the stage or clicking Settings... in the Properties panel.
- Select the image or images you want to remove in the Frames panel on the bottom.
- Either press the Delete key, or right-click the selection and select Delete from the pop-up menu.
To swap a gallery image:
- Open the Transition Gallery dialog by double-clicking the component on the stage or clicking Settings... in the Properties panel.
- 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.
NoneThere's no visual transition effect between frames.
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.
|
The new image slides into view while pushing the old image out of view.
Property |
Description |
|
---|---|---|
Style |
|
|
Duration | The duration of an animation from one frame to the next, in seconds. Defaults to 1. | |
Easing |
The easing of the transition animation.
|
|
Direction (available if Style is Regular) |
The direction of the effect.
|
|
Orientation (available if Style is Split) |
The orientation of the animation.
|
The new image gradually replaces the old image along a moving line or lines.
Property |
Description |
||
---|---|---|---|
Style |
|
|
|
|
|
||
Duration | The duration of an animation from one frame to the next, in seconds. Defaults to 1. | ||
Easing |
The easing of the transition animation.
|
||
Direction (available if Style is Regular, Stripe, Door, or Radial) |
The direction of the effect. Available options depend on the style:
|
||
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.
|
||
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. |
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.
|
|
Direction |
The direction of the effect.
|
|
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. |
The new image is revealed as though from behind window blinds.
Property |
Description |
|
---|---|---|
Style |
|
|
Duration | The duration of an animation from one frame to the next, in seconds. Defaults to 1. | |
Easing |
The easing of the transition animation.
|
|
Direction (available if Style is Regular) |
The direction of the effect.
|
|
Orientation (available if Style is Venetian) |
The orientation of the animation.
|
|
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. |
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.
|
|
Direction |
The direction of the effect.
|
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.
|
|
Orientation |
The orientation of the animation.
|
|
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.
|
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.
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 componentYou 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.
The following Transition Gallery component actions can be triggered in response to other events:
Action | Configuration options |
---|---|
Go to frame |
|
Rotate once |
|
Start autoplay |
|
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.