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 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.

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.

Was this helpful?

How can we improve it?

Need more help?

Try these next steps:

Post to the help community Get answers from community members
true
Search
Clear search
Close search
Google apps
Main menu
14117462843329827548
true
Search Help Center
true
true
true
true
true
5050422
false
false