Material Design Animation

[Michael71 59 Likes (Contributor)]

Hello,

 

I just wanted to ask a few opinions about the material design animations/easings.

 

Which ease offered by GSAP you think matches their example here: http://www.google.com/design/spec/animation/authentic-motion.html#authentic-motion-mass-weight

 

Also which techninques/plugins of GSAP could be used to create material desing based elements/componenets.

 

Looking forward to your responses.

[OSUblake 9,990 Likes (Superhero)]

Hi Michael,

 

You can use sin for vertical motion.

 

See the Pen pvrGqR by osublake (@osublake) on CodePen

[Michael71 59 Likes (Contributor)]

Interesting, thanks for sharing that. I would be interested in others opinions also, this isn't so much a question but rather an engagement for ideas.

[OSUblake 9,990 Likes (Superhero)]

You can use Draggable to create...

Slider

Splitter

Scrollable Tabs (It's under E. You need to resize your screen to see it, but you can drag it)

 

You can create some of these Hero Transitions by tweening a className.

https://www.polymer-project.org/components/core-animated-pages/demo.html

 

Here's a pen by Chrysto that does the animated tabs bar 

See the Pen WbRoWg by osublake (@osublake) on CodePen

 

Thomas Burleson has done some crazy stuff using GSAP with Angular. Check out the HTML code in these pens! 

See the Pen KwNoNP by ThomasBurleson (@ThomasBurleson) on CodePen

See the Pen jEVyjr by ThomasBurleson (@ThomasBurleson) on CodePen

 

[Carl 9,066 Likes (Superhero)]

Great stuff, Blake.

 

I took a stab at converting a CSS animation for Hierarchical Timing to GSAP: http://codepen.io/GreenSock/pen/ramJGv?editors=001