A demo of using GSAP to animate for material design, but bad.

animate.html

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/plugins/CSSPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/easing/EasePack.min.js"></script>
<style>
.float {
border: 0;
border-radius: 24px;
width: 48px;
height: 48px;
background-color: red;
box-shadow: 5px 5px 5px #888888;
}
#content {
height: 0;
background-color: black;
box-shadow: 5px 5px 5px #888888;
width: 300px;
}
#inner {
opacity: 0;
color: white;
}
#img {
background-color:powderblue;
width: 200px;
height:200px;
}
</style>

<button class="float" onclick="tween();">
+
</button>

<div id="content">
<div id="inner">
This is the text
<div id="img"></div>
This isn't an image ^^^^
</div>
</div>
<script>
function tween() {
TweenLite.to('#content', .25, {height: 250, onComplete: show});
}
function show() {
TweenLite.to('#img', .25, {opacity: 100});
}
</script>