Triangles physics.js

Animations playground.

by schrodingers

HTML

<script src="https://github.com/michaelvillar/dynamics.js/releases/download/0.0.7/dynamics.js"></script>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>

CSS

html, body {
    margin: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.triangle {
    border-bottom: 5em solid blue;
    width: 0;
    height: 0;
    border-left: 2.5em solid transparent;
    border-right: 2.5em solid transparent;
}

JavaScript

// TRIANGLE
var el = document.querySelectorAll('.triangle');

// From purple to green
function animate1() {
    dynamics.animate(el, {
        rotateZ: 180,
        scale: .5,
        borderBottomColor: '#43F086'
    }, {
        type: dynamics.spring,
        friction: 400,
        duration: 1300,
        complete: animate2
    });
}

// From green to purple
function animate2() {
    dynamics.animate(el, {
        rotateZ: 360,
        scale: 1,
        borderBottomColor: '#CA2F6F'
    }, {
        type: dynamics.spring,
        frequency: 600,
        friction: 400,
        duration: 1800,
        anticipationSize: 350,
        anticipationStrength: 400,
        complete: animate1
    });
}

// Start first animation
animate1();