Google Web Designer – Shape Transformation

Hello friends!

Today, with the help of Google Web Designer, we will learn how to transform one simple geometric shape into another, and then into a third. For example, a circle in a square with rounded corners, and then in a square.

If you don’t know how to create a square or circle in Google Web Designer, see this post.

Let’s start:
1. Create a banner. As in the last lesson – I take as a basis the size of 300×600 pixels with a fast animation mode.
google-web-designer-создание-проекта
2. Using the “Work with Tags” tool, create a circle, and for clarity, fill it with yellow. The border is 10 pixels thick and black. Let me remind you that you can adjust the shape fill, as well as work with other parameters using the “Properties” panel, located on the right:
Google-Web-Designer-свойства-фигур

3. On the timeline, by clicking on the “+” icon, add another frame to the existing one. Initially, everything looked like this:
google-web-designer-временная-шкала после добавления кадра получаем вот такой:
google-web-designer-временная-шкала-добавить-кадр

4. And now we begin to transform the circle into a square with rounded corners. To do this, on the first frame, select the starting position of our figure, and on the second – the ending position, and using the “Properties” panel (recall, it is on the right) – we transform the circle into a square with rounded corners. To adjust the angles, use the property responsible for drawing angles:
google-web-designer-стиль углов

In the screenshot above – the properties of the drawn corners, thanks to which a circle is created. If we want to get a square with rounded corners – just change the parameter from 80 to (for example) 30. As a result, we get something similar:
google-web-designer-стиль скругленных углов

moreover, the figure itself will look something like this:
google-web-designer-квадрат с закругленными углами

5. Try to test your animation. To do this, click the “Run” button located on the timeline:
google-web-designer запустить анимацию

As you can see – the circle that we created on the first slide is very simple, and most importantly – automatically – it transforms into a square with rounded corners, shown on the second slide (you can see how this happens on the frame below. I emphasize that in the example the transformation is looped for endless repetition , but we will discuss this issue a bit later :)) (upd: the demo for some reason does not work in the Chrome browser, but works great in Opera):

By the way! If you are confused by the frame rate (now it is 0.5 seconds) – by changing the key frame settings (this is available in the time panel):
google-web-designer-параметры ключевых кадров

You can not only adjust the time for changing key frames, but also change the transition style:
google-web-designer-параметры ключевых кадров - время и стиль

6. Now let’s try to transform a square with rounded corners into a simple square. For the interest of the experiment, we will also change the fill color of the figure from yellow to green. To do this, similarly to paragraph 3, add a keyframe on the timeline:
google-web-designer вставка ключевого кадра

in which we indicate the parameters of our figure (in our case, these are the parameters for rounding the corners, as well as the fill color – for this, I remind you, use the “Properties” panel located on the right). Adjust the rounding to zero, and fill the shape with green:
google-web-designer-квадрат зеленого цвета

After that, we start our animation, and enjoy: the yellow circle becomes a square with rounded corners, and after that it transforms into a green square.

And especially for you – a video tutorial 🙂

Thanks for your attention!
Repost to your page, and in case of questions – do not hesitate to ask !