Google - Hockey SmartHead
Task
A lot of micro-animations, a few creative ideas. Additional requirements for workability on mobile devices, and therefore imposed technical and hardware (load on the processor) restriction.
Ideas and solutions
Up to ~ 20 elements animated using the "skeletal animation" - the position of each element depends on the position of neighboring elements. The general positions of the characters should look natural. In addition, some elements (for example, skates) are drawn in different angles to animate the rotation of the foot around its axis, what is achieved by changing the angle of the element. The animation was made in Google Web Designer and then code was optimized manually. It was necessary to optimize the file size and load on the processor so that banners work correctly on mobile devices.
