Options for moving and resizing an element

Changing an element's position and size can be accomplished in two main ways using HTML5. The first way is to use the top and left coordinates of the element to specify position, and the element's width and height to specify size. The second way involves using the CSS transform property to translate and scale elements.

Google Web Designer uses both. For element layout, Google Web Designer uses top and left values to position elements, and width and height values to set size. Because the CSS transform property provides a higher frame rate and smoother animation, Google Web Designer defaults to this method when creating CSS-based animation.

When you use the default settings for the transform tools, they will work correctly for both layout and animation. You can change the method used to scale and position an element if you wish, however.

Limitations

  • Motion paths don't work with top/left positioning.
  • Animations in AMPHTML ads can't be based on top/left positioning or width/height sizing.

Positioning method

To change the positioning method:

  1. In the toolbar, click the Selection  tool.
  2. Click the positioning method  button.
  3. Choose a positioning method from the pop-up menu:
    Icon Positioning style Description
    Use default positioning Prefer top/left positioning for layout, and transform:translate3d() when animating position.
    Use top/left positioning Use top/left values when positioning an element in a keyframe.
    Use 3D translation Use transform:translate3d() values when positioning an element in a keyframe.

Sizing method

To change the sizing method:

  1. In the toolbar, click the Selection  tool.
  2. Click the sizing method  button.
  3. Choose a sizing method from the pop-up menu:
    Icon Sizing style Description
    Use default sizing Prefer width and height sizing for layout, and transform:scale3d() when animating size.
    Use width and height Use width/height values when sizing an element in a keyframe.
    Use 3D scaling Use transform:scale3d() values when scaling an element in a keyframe.

Move and resize elements

The positioning and sizing methods you selected will be used when you move or resize elements with the Selection tool.

Was this article helpful?
How can we improve it?