animatable

by Richard Hunter

HTML

<button id='left'>left</button>
<button id='beta'>beta</button>
<div class='container'>
<div class="animatable"></div>
</div>

SCSS

.animatable {

    position : absolute;
    width : 100px;
    top : 50px;
    left : 0;
    height : 100px;
    background : pink;
    
    transition : transform 1s linear, padding 1s linear;
    
}
.animatable.alpha {
    
    transform : translateX(600px) ;
    padding : 20px;
}
.animatable.beta{
    
    transform : translateX(100px)  ;
    padding : 30px;
}

@keyframes moveright {
    from {
        left : 20px;
    }
    to { 
        left : 200px; 
    }
}

JavaScript

var anim = document.querySelector('.animatable');
var left = document.querySelector('#left');
left.addEventListener('click', function  () {
    anim.classList.remove('beta');
	anim.classList.toggle('alpha');

});
var beta = document.querySelector('#beta');
beta.addEventListener('click', function  () {
    anim.classList.remove('alpha');
	anim.classList.toggle('beta');

});