Published on | Prototyping: From UX to Front End — Medium Meisi Huang

What you see above are different types of vibration, which is widely used in nowadays motion design. Knowing how to create a slick vibration will add extra points to your work. After doing lots of explorations, I want to share one really useful technique. Though it’s just the tip of the iceberg, hope it will help on your way.

By observing the motion above, we may find something in common: the vibration is attenuated over time until the objects return to the still state. Then questions came: Is the amount of attenuation the same each time? If not, is there any rule we can follow? I used to roughly come up with some numbers, but the motion always looked a little bit unnatural. After doing some research, I found out a way to precisely calculate the vibration amplitude each time. Right, we have to apply one physics formula here… But don’t be scared away! It’s actually pretty simple and the result is stunning.

The formula above is a simplified version(you can find the original formula here if interested). By testing with the four motions above, I think the simplified one is accurate enough to produce an impressive outcome.

In the formula:

“A” represents the initial vibration amplitude. The larger A’s value is, the more intense the vibration will be. I usually make “A” equal to half of the object size.

“b” is a positive constant. The larger b’s value is, the faster the attenuation will be. I usually give b the values around 0.8. But of course, you can manipulate its values according to different cases.

“n” is kind of like the number of times of vibration. But remember, it starts from 0.

Now let’s try to create a vibration using this formula.

In this example, the size of the object is 200. I make “A” equal to half of the object size, which is 100. I give “b” the value of “0.9”. The diagram above shows the size of the object by the end of each vibration. We can see when n=4, the amplitude is already very small, so we can end the vibration here. Below is the outcome. Not bad!

Still the same object, but this time I will give “b” a smaller value — “0.2”, which will make the attenuation much slower. You can tell the difference by watching the outcome below.

That’s pretty much of it. You can use this formula to create various of slick vibrations that feel natural and joyful. Finally, I’ll use two real examples as the ending.

Thank you for reading : )

How to Create a Slick Vibration was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to Create a Slick Vibration

Cool stuff, every week

More Articles