We explored the depths of HTML5 Canvas and the first results are promising!
Several studies show that animations will be one of the great Web trends for 2017, so we felt like it was time to increase our know-how and dive deeper into the vast array of possibilities that HTML5 Canvas has to offer. We then began to develop some basic animations that responded to the movements of the mouse cursor, in order to provide some interactivity with the users.
Here are some of the experiments we "cooked" in our laboratory.
1. Canvas Mouse Bubbles
In this animation, we created an effect of floating bubbles that are spawned from the coordinates of the mouse cursor and that rise until they vanish. Each bubble has a lifetime of 1000 milliseconds. Based on this factor, we can calculate each bubble's opacity, from the moment it appears on the canvas until the moment it vanishes.
2. Canvas Moving Dots
This experiment turns out to be a variation of the Canvas Mouse Bubbles, but in this case, the animation starts when the page loads. The user can still interact with the animation, making the bubbles bigger while moving the mouse cursor across the canvas.
3. Canvas Triangles Background
This is by far the most complex animation we produced. Inspired by the versatility of Motion Graphics, we wanted to find out if it was possible to create elaborated animations using only web-based technologies.
The main advantage in relation to video is that HTML5 Canvas allows developers to create animations that users can interact with.
In this animation the user can interact with the triangles by changing the opacity and the border color of those in the vicinity of the mouse cursor.