KENT: Hello my name is Kent
I'm the creative specialist on the Google Web Designer team
and I'd like to demonstrate the
Transition gallery component
It's a gallery component like the Swipe gallery or the Carousel
but the Transition gallery allows you
to create animations between frames like this
You'll find it in the components panel
inside the Galleries folder
Double click the Transition gallery to add it to the stage
and resize it in the Properties panel
then with the Selection tool
double click the component on stage
to open its dialog where we have three main panels
Library, Transition, and Properties
plus Frames and the stage
The first thing I
need is to add some images
onto either the frames or stage areas
I can use the
Choose images link here
or drag and drop them from either my Desktop or the Library panel
now you see your images in the frames panel in playing order
from left to right and you can rearrange them
But I see some distortion
so I'll change the Scaling mode in the Properties panel
from stretch to one of these other
values like crop
and this would be applied to all frames
The Transition
panel is where you choose
one of seven effects
and I'll start with Fade
Turn on looping which is only for design preview
not the published ad and start the
playback
While this plays I can try other transition types
and notice each
type has different controls
for example Blinds has venetian and regular
and I can speed up the animation with duration
I'll use a half a second
Next we have
easing options
Linear means no easing
Orientation I'll use Horizontal
Blinds let's tried 10
and Staggered creates a cascade
Next the Properties panel
provides functionality controls
and these stay mostly the same between
different transition types
with a couple exceptions
Name is optional and used
mostly with the Events panel
if you want a more descriptive name
Scaling we've
already seen
Start frame refers to the published ad
Autoplay also refers to
the published ad
and the same goes for the rest of these controls
which can be
seen in the Preview panel up here
and I'll show that after a few more settings
Interval is the time between slides
after the transition finishes
and Repeat
is the number of loops played
the zero here means loop forever
Interaction Wrap means whether the gallery loops back to the beginning
this only affects interactions like click and swipe
it doesn't affect
autoplay which always wraps
For transition types Push, Wipe, and Slice
you'll see more controls here
so I'll change to Push
now gesture can be a
mouse click or a mobile swipe
and with swipe I can ignore a reverse swipe
which refers to the transition direction in the top panel
Enable interactive
transition means whether the animation
will be controlled by the swipe or drag
speed
as opposed to just triggering an animation to play at its duration speed
Navigation will include either dots or thumbnails
the user may click on to jump
to that frame
And now we can switch to preview mode
where we can see all those
settings we just made
One last control is exit URLs
I can paste a URL here and
add more separated by commas no spaces
so I have a different exit page for each
one of my frames
To test this we'll need to save this dialog
and preview in a
browser
and when I click on a frame
I can verify that I'm directed to the
correct landing page
Now I'd like to mention a couple advanced topics
In the Events panel you'll be able to see the Transition Gallery
and its events like
Autoplay ended
and actions like Go to frame
which you can use to build your
own custom navigation interface
Next I'd like to show how to set up dynamic content from your feed
Just right click the component on stage
and choose Dynamic bindings
The first thing is to select a data schema
which is different
between environments
Mine is Google Ads
and I'll just choose Retail
Next on the
Bindings dialog
I see my gallery already selected
so I'll just set my
element attribute to Images
And the last field here is a little tricky
I want to choose the top-level array value from my feed
which in my case is Retail
so I click it then switch to the Filters tab
and look for Pluck and join
then click
this little pulldown triangle
to populate the field with my image URL
This means to use every image found in my feed data
as if I've set them as
separate frames
Now accept this with the OK button
and I don't see the results on stage yet
but I could if I change my sample data
However the best way to test this is
to preview in a browser
And now I see my
dynamic feed images are being shown
And one final thing to mention is
this component is fully responsive
so in any responsive document
just set component
Width and Height to % values
That does it for the Transition gallery component
Thanks for watching!
