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:
- In the toolbar, click the Selection
tool.
- Click the positioning method
button.
- 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:
- In the toolbar, click the Selection
- Click the sizing method
button.
- 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.
