Transition Gallery – Google Web Designer


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!

Add a Comment

Your email address will not be published. Required fields are marked *