CODEWITHSUNDEEP
cssanimation
John Ohara
John Ohara

Reputation: 2901

Animating from one element to another

I'm currently studying material design for a new website project.

I'm pretty much a back end coder but although UI stuff is outside of my comfort zone, it's something I can do once I understand the principles.

I came across this page - scroll down to the Morph section:

https://material.io/design/components/buttons-floating-action-button.html#types-of-transitions

As you can see a button morphs into another object, in this case a tuner control. The object isn't important but I need to understand the basics of how something like this would usually be achieved.

Is it just a case of scaling the button to zero size, while simultaneously scaling the tuner to full size or am I missing something important?

Upvotes: 0

Views: 70

Answers (1)

Daniel Bardaji Torres
Daniel Bardaji Torres

Reputation: 86

Here https://inbox.google.com/ (you need to be log to see it)

You have this type of button implemented by Google.

They are using transform scale to the grow effect for the buttons and also they have a different delay transition for every single button.

I hope helps!

Upvotes: 1

Related Questions