<div class="scene">
	<div class="effects">
		<div class="effects-wrapper">
			<button class="roll">roll</button>
			<button class="blink">blink</button>
			<button class="eyebrows">eyebrows</button>
			<button class="lookRight">look right</button>
			<button class="lookLeft">look left</button>
			<button class="joy">joy</button>
			<button class="spin">spin</button>
			<button class="wink">wink</button>
			<button class="hm">hm</button>
			<button class="nice">nice</button>
			<button class="celebrate">celebrate</button>
			<button class="glasses">glasses</button>
			<button class="sparkle">sparkle</button>
			<button class="money">money</button>
			<button class="love">love</button>
			<button class="nod">nod</button>
		</div>
	</div>
	<div class="bodymovin" id="bodymovin"></div>
</div>

				
				
				
.scene {
	@media (min-width: 440px) {
		display: flex;		
	}
}

.effects {
	@media (min-width: 440px) {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 30%;
	}
}

.effects-wrapper {
	@media (min-width: 440px) {
		display: flex;
		flex-flow: column wrap;
		justify-content: center;
		height: 300px;
	}

	button {
		appearance: none;
		border: 0;
		background: #219ada;
		margin: 5px;
		padding: 5px 10px;
		color: #fff;
		cursor: pointer;
		border-bottom: 3px solid darken(#219ada, 10%);
		
		&:hover {
			background-color: darken(#219ada, 10%);
		}
	}
}

.bodymovin {
	height: 300px;
	
	@media (min-width: 440px) {
		width: 400px;
		height: 400px;
		// margin: auto;
	}
}
View Compiled
const params = {
	container: document.getElementById('bodymovin'),
	renderer: 'svg',
	loop: false,
	autoplay: false,
	animationData: animationData,
}

const anim = bodymovin.loadAnimation(params)

function roll() {
    anim.playSegments([[0, 65]], true)
}

function blink() {
    anim.playSegments([[65, 85]], true)
}

function eyebrows() {
    anim.playSegments([[95, 125]], true)
}

function lookRight() {
    anim.playSegments([[125, 165]], true)
}

function lookLeft() {
    anim.playSegments([[165, 204]], true)
}

function joy() {
    anim.playSegments([[204, 244]], true)
}

function spin() {
    anim.playSegments([[272, 310]], true)
}

function wink() {
    anim.playSegments([[310, 351]], true)
}

function hm() {
    anim.playSegments([[351, 400]], true)
}

function nice() {
    anim.playSegments([[400, 438]], true)
}

function celebrate() {
    anim.playSegments([[440, 530]], true)
}

function glasses() {
    anim.playSegments([[530, 595]], true)
}

function sparkle() {
    anim.playSegments([[595, 662]], true)
}

function money() {
    anim.playSegments([[665, 725]], true)
}

function love() {
    anim.playSegments([[725, 780]], true)
}

function nod() {
    anim.playSegments([[785, 870]], true)
}

document.querySelector('.roll').addEventListener('click', roll)
document.querySelector('.blink').addEventListener('click', blink)
document.querySelector('.eyebrows').addEventListener('click', eyebrows)
document.querySelector('.lookRight').addEventListener('click', lookRight)
document.querySelector('.lookLeft').addEventListener('click', lookLeft)
document.querySelector('.joy').addEventListener('click', joy)
document.querySelector('.spin').addEventListener('click', spin)
document.querySelector('.wink').addEventListener('click', wink)
document.querySelector('.hm').addEventListener('click', hm)
document.querySelector('.nice').addEventListener('click', nice)
document.querySelector('.celebrate').addEventListener('click', celebrate)
document.querySelector('.glasses').addEventListener('click', glasses)
document.querySelector('.sparkle').addEventListener('click', sparkle)
document.querySelector('.money').addEventListener('click', money)
document.querySelector('.love').addEventListener('click', love)
document.querySelector('.nod').addEventListener('click', nod)
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.7.0/bodymovin.min.js
  2. http://historictakoma.org/greg-temp/testAnimData.js