<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
This Pen doesn't use any external CSS resources.