Unlock the Power of Morph Animation with HTML5 Click Here to See Whats Possible

A subtle animation or transition on an app interface would make a more alive and smooth user experience. Animation provides a sense of flexibility in accessing the elements and is easy on the eyes.

Transitions must also hold a degree of realism that respects the laws of motion in physics while comforting the user with its smooth aesthetics. It must also be meaningful and not distracting.

Here in this tutorial, we are going to create a Morphing model animation. Morphing is the ability to move and stretch one element seamlessly into another. As you see in the GIF, While clicking the “Read more” button, the button itself stretches smoothly into a model. We are going to achieve it with plain Javascript & CSS

The Ultimate Guide To Powerpoint Alternatives

Event. As you see the main image, while clicking on the button, it has to turn into a circle. That would be the starting point of our animation. We are going to achieve this through CSS & Javascript.

As you see the final animation, while clicking on the ‘Read more’ button, it looks like the button itself expanding to fullscreen. So the

We are going to achieve this animation in the same way that we used for the button, “add and remove” classes with Javascript. Initially, we have compressed the size of the backdrop by scale down it by

Power Up Letdown

But we can not set this as the backdrop width because our backdrop is in the shape of a circle, so window width can not cover the whole screen

The position of the clicked button. We are going to create a Javascript function to get the cumulative offset values of the clicked button.

But as you see, there is a little problem. The button and the backdrop are animating simultaneously. As soon as we click the button, the backdrop expanding and hiding button’s animation which spoils the morphing animation concept.

Logomotion 2.1 For Windows 95/nt And Power Macintosh

The button should animate first, once that completed we have to call backdrop animation. We can achieve this by adding some microseconds

Out backdrop is ready, now we have to display our content model over it. It will be a simple container that we have to “hide & show” along with the backdrop.

In the same way, we have to close the model by removing the classes which we have added to while opening. For example, while clicking on the close button on the model, we have to removeTo no one’s surprise, I’m sure, there are lots of different ways to do the same thing on the web. Shape morphing, being a thing on the web, is no different. There are some native technologies, some libraries that leverage those, and some libraries that do things all on their own. Let’s look at some of the options (with demos) and weigh the advantages and disadvantages.

Morphing Power Cubes

The original, native technology for shape morphing is SMIL. We have both a guide to SMIL on , and an article talking about replacements for it, since it doesn’t work in Microsoft browsers and Blink threatened to yank it at one point.

Our article How SVG Shape Morphing Works covers SMIL shape morphing in detail, and the demo above is from Noah Blon’s An Intro to SVG Animation with SMIL.

MorphSVGPlugin is a bonus plugin for Club GreenSock members (“Shockingly Green” and “Business Green” levels). It’s our way of showing our gratitude to those who are fueling innovation at GreenSock.

Hidden Gems Of The Greensock Animation Platform

Worth it. Just MorphSVG alone is amazing. Unlike almost any other shape morphing method, it can tween between shapes of any number of points. It does so performantly, in a safe cross-browser fashion, and gives you more fine grain control over how the animation goes down.

If you’d like to play with MorphSVG, I created a drag-and-drop Pen to morphing between any two shapes (best results with SVG’s with

If you’re a user of Adobe Muse, you might be interested in the Muse Morph widget which combines Illustrator, Muse, and Greensock MorphSVG.

The Many Tools For Shape Morphing

SnapSVG’s animate() function will animate an SVG element’s properties, including path data. Codrops has excellent examples of this in action. Here’s a little movie showing some of them off:

It’s a little hard to believe, but CSS is getting in on the shape morphing action! Eric Willigers, a Chrome developer, emailed me last year:

‘d’ has become a presentation attribute. This allows SVG path elements to be animated using CSS animations and Web Animations, with path(‘…’) keyframes.

Flash Professional Basics

I assume this is a spec change, so browsers other than Chrome will, presumably, start allowing this. For now, this works great in Chrome:

The API gives you some control over the morphing, like how precise you want it to be and the ability to reverse the draw direction so different points match up to tween.

D3, probably the biggest library out there for data viz folks, can also do shape morphing. Here’s a GIF recording of a demo by Mike Bostock:

Davinci Resolve 18

“Motion graphics for the web” is the mo.js tagline, another newer library. Oleg Solomka (@LegoMushroom) has some incredible demos of what is is capable of:

If you happen to be a video person before you became a web person (or you’re still both) perhaps you have experience working in Adobe After Effects, which is all about creating “incredible motion graphics and visual effects”. The bodymovin library exports After Effects into SVG, including plenty of hot morphing action. Here’s a great demo: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:

Creating Morphing Animations With Css Clip Path

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.

Amazing Pure Html And Css Background 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.

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.

Net0520 By Nickolportnov

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, a pleasing effect. Last but not least, there’s a slight rotation to account for the difference in the angle and placement.

Let’s zoom in a bit and have a look at the composition of the shape. Each half consists of 64 nodes each. Note the dense amount of nodes on the left side. The uneven placement of nodes here is deliberate. Nodes are more concentrated on the left side. This placement adds to the effect. The bottom corner will seemingly move when the triangle changes its shape. That is when three corners transform into four.

Animation subsequently means the actual transformation, animating the starting shape from its starting point to the final figure. Creating movement in the SVG space is, so far,

How To Create A Morph Animation?

Bagikan Artikel ini