Each scene represents the entire ad or webpage as it appears at the start or end of the animation. Google Web Designer handles the transitions between scenes.
There's no way to have individual animation start and end times for each element when you're in Quick mode. For more complex animation, click the Switch to Advanced mode button to switch to Advanced mode.
Add animation in Quick mode
- Create and arrange all the elements on the stage how you want them at the start of the animation. The timeline shows a thumbnail of the stage.
- Click the Add thumbnail button in the timeline. Google Web Designer creates a copy of the previous scene.
- Edit the elements on the stage so they appear the way you want them at the end of the animation. Changes can include moving and rotating elements, switching their color, resizing them, or adjusting other properties. Unchanged elements remain static.
- Repeat steps 2 and 3 to add as many scenes as you like to your animation, each time changing the elements you want to animate.
Google Web Designer automatically animates the changes between scenes.
Preview your animation
You can see how your animation looks on the stage by clicking the Play button at the top of the timeline. The preview begins from the currently selected thumbnail.
To loop the preview playback, select the Repeat play button on the timeline before clicking Play. You can pause the preview by clicking the Pause button or pressing the Enter key.
You can't make edits while the animation is playing.
Change the transition between scenes
- Click the transition icon between scenes.
- The transition editor opens.
- Adjust the transition:
- Change the transition duration (in seconds)
- Change the easing type by clicking the arrows
Switch to Advanced mode
Click the Switch to Advanced mode button. Each scene is converted into a set of keyframes that preserves your animation.