Parallax Overview – Google Web Designer

Parallax Overview – Google Web Designer

NIVESH: Hi my name is Nivesh
and I’m a developer on Google Web Designer. In this video I’m going to give you an overview of using the parallax component to create parallax animations As I scroll
the page up or down the foreground and background images move at different speeds
creating an illusion of depth The parallax component relies on
the ad publisher’s site to forward the page scroll events to the ad In response to the scroll events the parallax component animates the images. You can find some
other examples of parallax animations in our File, New from template… in the
Parallax for Display & Video 360 category Here are what these parallax
examples look like in the browser You’ll notice that the images move vertically as well as horizontally as I scroll the page Now let’s create our own parallax
animation Go to File, New The environment has to be Display & Video 360
for parallax component To add the parallax component to your project open the Components panel and drag the parallax component from the interaction folder onto the stage You can configure the parallax component by going to the
properties panel and clicking on the Images control or you can double click
on the component itself You start by adding images to your parallax animation You can add images by dragging files from your file system onto the stage or layers panel Or you can click on the plus button in the layers panel and add images from the file system You can reorder the layers by dragging and dropping them in the layers panel The order of the layer determines
which layers display in front of each other the higher layers display in front
of the lower layers You can also show and hide the images by clicking on the thumbnail area or you can click on the eye icon to show and hide all the images Hiding a layer can make it easier to work on another layer For example I’m
going to hide all the layers except for the product, the text,
and this big leaf The settings dialog has three tabs Start, End, and Preview You configure the
parallax animation by positioning each layer where it should appear at the start and the end of its animation The start position is when the component
first comes into view in a webpage This part when the component is first
coming into view and the end position is when the component has just left the
viewport So let’s configure in the start position I’m going to hide the big leaf
again and I’m going to move this using my mouse the product to the center I can also use arrow keys and I can hold down the shift key to move them by 10 pixels
at a time or I can actually directly type
into the layer properties panel And in the end position,
to quickly copy the values from the start position you can click on
the match position button here Let me reposition the big leaf in the
start and end position Now I can hold down the shift key
to constrain the movement as I drag my mouse and I’m going to move this leaf far away
at the end position And I can turn on show ghost option
in the advanced properties and this will display
a translucent image of the other tab whichever tab you’re not currently editing Ghosts are for your reference
and won’t show in the preview or in the published file Now let’s preview You can scroll up and down and see how the visible layers
behave in the sample mobile device You can click the start or end tab
to continue editing the file so in this case I’m going to change the
easing option to Ease-in-out and I’m going to fade in the text from 0.3 to 1 and now let’s preview that again You can also set the width and height
of the layers I’m going to change the leaf’s width to 250 pixels And since the aspect
ratio is locked the height updated automatically Note that the layer remains the specified size at both the start and the
end That is the sizes will not be animated When you’re satisfied with the
component click Save and you’ll return to the normal Google Web Designer
interface To save time I’m going to go back to the template file that has all
the animation already set up and we’re going to go to the properties panel and go to the scroll factor section here This scroll factor property is used for
display on Google Web Designer stage only You can see what the ad would look
like with different scroll factors by updating this value You can preview your
ad in the browser as well when you preview in browser the preview page
emulates how the ad displays on a web page with enough content for you to
scroll above and below the component You can see what the parallax animation
looks like in the context of the overall ad such as with your CTA button
and exit actions Thank you for watching the video

16 thoughts on “Parallax Overview – Google Web Designer

  1. What a google team! Perform a parallax test and everything worked in the right way until the implementation process. The material was uploaded to a test page with AdManager but only displayed in a static way. I share the test link of the material. regards

  2. !!!!!!!!!!! HELP PLEASE !!!!!!!!!!!!

    I have tried my own any it is displaying correctly in preview but when I'm uploading it through AdManager on the website it work animate . its still like a JPEG.
    Here the preview link oo the website SLICE Campaign banner 300×250 SIDEBAR (HTML5 Export from GWD)

  3. Hello, I cannot use in OS Mojave. I have download but, when I try to open, the program cannot run. Could you confirm? Thank you!

  4. I build an ad creative with a parallax component and upon creating I set its environment in Display & Video 360 but it will not work if I uploaded the ad creative in AdManager because the scroll API for parallax is not supported in AdManager? Is that what you meant? That's why I keep on getting this error "Uncaught SyntaxError: Unexpected token = in JSON at position 1 at JSON.parse "?

  5. Off Topic from this video. Serious question: After you create a Parallax AD in Google Web Designer. You hit publish. You select Locally, Google Drive, Studio, Display Video 360. I pick locally. After I save the Zip drive to my folder on my computer. How do I then upload it to Google Ad Words ? Where or how do you upload your Zip file in the Google Ads portal ? Also once it gets uploaded how do you assign it to an Ad Group to run ? Hope my question makes sense. Thank you sir.

Leave a Reply

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