See how this mesmerizing little animation can be created in H5Build with just 9 tweens.

We use Morph SVG and a carefully constructed Adobe Illustrator file to create an animation sequence that seems far more complicated than it is. As is often the case, all the effort is in Illustrator.

There are 24 triangles, 24 hexagons, and 24 circles. Once you access this file in H5Build, you can save your own copy, download the original Illustrator asset in the SVGs Module, and see exactly how it was done. Go ahead and try it out. Create your own variations.

If you don’t have an account, you will be asked to set one up. It is completely free!

Edit in H5Build

Once you have opened this file in H5Build, you will see the 11-modules tabs on the left and the 3-main areas in the workspace: Stage, Timeline, and Property Panel.

There are 11 timeline items in the Animate Module, but only 9 of them are used for this animation.

Each timeline item has a property panel that provides access to all the settings for that item. See in the property panel above, how 24 triangles can morph into 24 circles.

Select the SVGs module on the left to access the Adobe Illustrator AI and SVG files. You can download them here and check out how the assets were created and structured.

Go ahead and modify them and upload your own version. Be sure to retain the structure and the layer/group/asset naming.

There is nothing complicated here!

Our animation strategy allows you to create assets in a program you already know, Adobe Illustrator. Use the graphics community’s most powerful and popular drawing program for all your drawing!

We use a custom naming script to automatically name all the assets in the Illustrator file. Naming assets like this is optional, but useful for the beginner and for our tutorials.

We would love to hear your questions, comments, and feedback.