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.

Change the positioning style

To change the positioning style:

1. In the toolbar, click the Selection tool .
2. Click the positioning style option button .
3. Choose a positioning style from the pop-up menu:

   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.

Change the sizing style

To change the sizing style:

1. In the toolbar, click the Selection tool .
2. Click the sizing style option button .
3. Choose a sizing style from the pop-up menu:

   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.

Transform controls

When the Transform Control tick box in the tool options bar is ticked, the Selection tool  lets you change the size and rotation of your selected elements.

To rotate a selection:

1. In the toolbar, click the Selection tool.
2. Make sure that the Transform Control tick box is selected in the tool options bar.
3. Select the object or objects. Rotation controls (two nested rings) will appear in the middle of the selection.
4. Optionally, change the centre of the rotation by dragging the inner ring of the rotation controls.
5. Rotate the selection by dragging the outer ring of the rotation controls.
   • Hold the Shift key while dragging, to constrain the rotation to 45° increments.

To resize a selection:

1. In the toolbar, click the Selection tool.
2. Make sure that the Transform Control tick box is selected in the tool options bar.
3. Select the object or objects. Selected elements are surrounded by a blue box.
4. Drag one of the control points on the sides or corners of the bounding box.
   • Hold the Shift key while dragging, to maintain the original aspect ratio of the selection.

 

Resizing SVGs

If you're resizing an SVG image or shape to make it larger, use the width and height properties rather than 3D scaling. If you're using the Selection tool Transform control, you may need to change the sizing style.