Shadow Animation

Animating the shadow effect to make it look like elements are being raised off the paper.
We can do this with the help of a little function.
This is the result.
Animate to 0
Animate to 1

Animate to 3
Animate to 5
1. I used two div's for the animation of the two shadows.
<div id="one" class="bg-primary" style="width: 200px;height: 100px; margin: 70px">
        <div id="two" style="width:100%; height:100%">
        </div>
</div>
2. An onclick event to trigger the animation.
 <div class="btn btn-primary ripple-effect" onclick="animateTo('0')"> Animate to 0 </div>
3. A function to do the work:
function animateTo(to) {
        var shadow1 = '';
        var shadow2 = '';
        if (to == 1) {
            shadow1 = '0 2px 10px 0 rgba(0, 0, 0, 0.16)';
            shadow2 = '0 2px 5px 0 rgba(0, 0, 0, 0.26)';
        };
        if (to == 3) {
            shadow1 = '0 17px 50px 0 rgba(0, 0, 0, 0.19)';
            shadow2 = '0 12px 15px 0 rgba(0, 0, 0, 0.24)';
        }
        if (to == 5) {
            shadow1 = '0 40px 77px 0 rgba(0, 0, 0, 0.22)';
            shadow2 = '0 27px 24px 0 rgba(0, 0, 0, 0.2)';
        }
        $('#one').animate({
            boxShadow: shadow1
        }, 700);
        $('#two').animate({
            boxShadow: shadow2
        }, 700);
    };
4. Add the following js file