Creating Morphing Animations with CSS Clip-path
Learn how to implement morphing, a technique for transforming one appearance into another, using CSS. Photo by Thomas Renaud on Unsplash I’ve been quite intrigued by morphing lately. As usual, when I find things to deep dive into, the energy so often ends up in demos (pens) on my Codepen profile. Codepen is the perfect place to channel one’s creativity. It’s a community filled with new ideas and sweet people. At Codepen, sharing is central. Here most strive to improve, to grow with others. This article is about, what I call, in lack of a better term, clip-path morphing. It will discuss a pen on my Codepen account called the Play Pause Button and the technique behind it. Here is a short video of the animation that we’ll dig into: Video of the demo Play Pause Button Morphing is a technique where you transform one appearance into another. It’s a shape-shifting animation where a two-dimensional object, say an image or a figure or similar, turns into a different shape. Technically it’s the interpolation from one set of coordinates to another. For the sake of simplicity, this article regards the starting shape and the end state as collections of the same amount of nodes. In theory, it is possible to create the effect with different amount of nodes. Having the same number of nodes in the starting point/shape as in the final figure simplifies things a lot. It does so without compromising the coolness of the effect. Below is an example of a basic clip-path morphing animation. The video shows a shape alternating between a box and a star. The collective movement of all nodes together is what makes up the effect. Some nodes move a long distance, and some not at all. This characteristic is typical for morphing. It’s a trait that distinguishes it from other kinds of animations. Most of the morphing effects, seen on the web today, comes in SVG. Vector graphics are all about coordinates. SVG is thus a natural starting point to create morphing effects. With SVG, you have quite sophisticated tools at your hands. These tools help out to place objects in different layers, create different coloring, rearrangement of objects and sizes, etc. Especially interesting is the editing of shapes where one can manipulate the separate nodes and alter figures. Creating a Morphing animation can, in rough terms, be divided into the following two activities: Modeling Animation Modeling refers to the act of creating different vector patterns in the Morphing effect. I almost always start by creating the shapes in Inkscape, a vector editor. The same goes for the demo discussed in this article. It’s fundamentally an SVG object that I’ve partly ported to CSS. The animation in the demo consists of two separate shapes. What we’re looking at is an animation between a play symbol and a pause symbol. The play symbol comes as a triangle with rounded corners. The pause symbol is quite different; it consists of two parallel bars. As the two parts come in an uneven amount of shapes, two vs. one, we need to combine the two somehow to create the effect. The easiest way is to split the play symbol, as seen above, into two equal parts. Using two even symmetrical parts in animation is generally a good idea. There is something about symmetry. It usually creates, to the eye, » Read More
Like to keep reading?
This article first appeared on blog.bitsrc.io. If you'd like to keep reading, follow the white rabbit.