08. Falling snow
The snow is created using an SVG and the technique is very similar to the way we created the bubbles earlier. To start, we create two layers of circles inside an SVG, then we animate those two layers by translating the Y value with a keyframe animation.
We apply the animation to each layer instead of individual elements and reuse the same animation for both layers. By simply giving them different durations, we can add some depth to our scene.
09. Moving background
The website A Violent Act uses masking and subtle movement to grab the attention of the user. The majority of the work here is in the setup and creating the SVG.
10. Colourful transitions
The Da-Ink website uses a really effective technique to transition between pages. The transition is simple and consists of an SVG containing a number of different-sized rectangles of different colours positioned on top of one another.
The animation consists of transforming the X position by the width of the SVG. Then, using nth-of-type, we apply delays, offsetting each by 75ms from the last to create a smooth transition.
11. Pulsing circles
The pulse animation used on the Peek-a-Beat website is simple yet effective and not difficult to reproduce – consisting of three circles inside an SVG in which we animate their scale and opacity.
12. Expanding highlight
This is a very simple, yet really effective technique. The transition is accomplished using the ::before pseudo element. To begin with, the pseudo element is placed at the bottom while spanning the full width, but only a few pixels in height.
When the element is interacted with, the width and height of the pseudo element are both transitioned to 105% of the parent’s size (the change is much more dramatic vertically), as well as transitioning the colour of the text.
13. Elevated title
Ensemble Correspondances uses simple animation to convey movement in music. The design loosely represents sheet music.
14. Spinning menu icon
The animated menu button is created using an SVG. The animation occurs when the user interacts with the menu button. Two transitions take place: the circular group around the menu spins 360 degrees and the menu icon in the centre changes colour.
The most complicated part is the timing-function. Utilising cubic-bezier to gain complete control, we’re able to start the animation slowly, race through the middle part and slow it down again at the end.
15. Underline from the centre
The animation consists of positioning the ::after pseudo element to the bottom and then scaling it when the button is interacted with.
16. Expanding corners
The Princess Alexandra Auditorium website has a visual way to show the categories of its shows. Each of the show cards has a triangular corner set in a colour which represents the category and then, on hover, the name of the category is displayed.
The effect is accomplished using the ::before and ::after pseudo elements, transitioning the size of the triangle and fading the name in when the element is interacted with.
17. Sliding arrow
The Greenwich Library has a really interesting transition on its buttons. When interacting with the button, two things happen: the text part of the button is covered and the arrow is then animated off the right-hand side of the button and back in from the left.
The colour transition is accomplished with the transition property and the arrow using a simple keyframe animation. Both the transition and the animation use the same duration in order to synchronise the movements.
Much of this article originally appeared in issue 268 of Web Designer, the creative web design magazine – offering expert tutorials, cutting-edge trends and free resources. Buy issue 268 here or Subscribe to Web Designer here.