Jump to content
Search Community

Material Design Animation

Michael71 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



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.

Link to comment
Share on other sites

You can use Draggable to create...



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.



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


  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...