<div class="padding-md">
 <div class="margin-bottom-md">
  <div class="flex items-center flex-wrap flex-gap-md">
   <div>
    <button class="btn btn--primary js-btn-trigger">Start animation</button>
   </div>

   <div class="flex flex-wrap flex-gap-sm js-input-wrapper">
    <div>
     <input type="radio" name="radioButton" id="radioAll" checked>
     <label for="radioAll" class="text-sm">show all</label>
    </div>
    <div>
     <input type="radio" name="radioButton" id="radioLinear">
     <label for="radioLinear" class="text-sm">linear</label>
    </div>
    <div>
     <input type="radio" name="radioButton" id="radioBounce">
     <label for="radioBounce" class="text-sm">bounce</label>
    </div>
    <div>
     <input type="radio" name="radioButton" id="radioEaseInOut">
     <label for="radioEaseInOut" class="text-sm">ease-in-out</label>
    </div>
    <div>
     <input type="radio" name="radioButton" id="radioEaseIn">
     <label for="radioEaseIn" class="text-sm">ease-in</label>
    </div>
    <div>
     <input type="radio" name="radioButton" id="radioEaseOut">
     <label for="radioEaseOut" class="text-sm">ease-out</label>
    </div>
   </div>
  </div>
 </div>
 
 <div data-animation="radioLinear">
  <p class="text-sm margin-y-xs">linear</p>
  <div class="box-item"></div>
 </div>

 <div  data-animation="radioBounce">
  <p class="text-sm margin-y-xs">bounce</p>
  <div class="box-item box-item--bounce"></div>
 </div>
 
 <div data-animation="radioEaseInOut">
  <p class="text-sm margin-y-xs">ease-in-out</p>
  <div class="box-item box-item--ease-in-out"></div>
 </div>
 
 <div data-animation="radioEaseIn">
  <p class="text-sm margin-y-xs">ease-in</p>
  <div class="box-item box-item--ease-in"></div>
 </div>
 
 <div data-animation="radioEaseOut">
  <p class="text-sm margin-y-xs">ease-out</p>
  <div class="box-item box-item--ease-out"></div>
 </div>
</div>
// Timing functions - 🐞 https://codyhouse.co/ds/get-started

.box-item {
 width: 50px;
 height: 50px;
 background-color: var(--color-contrast-higher);
 transition: transform 1s;
}

.box-item--bounce {
 transition-timing-function: var(--bounce);
}

.box-item--ease-in-out {
 transition-timing-function: var(--ease-in-out);
}

.box-item--ease-in {
 transition-timing-function: var(--ease-in);
}

.box-item--ease-out {
 transition-timing-function: var(--ease-out);
}

.box-item--animate {
 transform: translateX(calc(100vw - 80px - 2*var(--space-md)));
}
var boxItems = document.getElementsByClassName('box-item');
// trigger animation
document.getElementsByClassName('js-btn-trigger')[0].addEventListener('click', toggleAnimation);

function toggleAnimation() {
  for(var i = 0; i < boxItems.length; i++) boxItems[i].classList.toggle('box-item--animate');
};

// reset items visiblity
document.getElementsByClassName('js-input-wrapper')[0].addEventListener('change', resetVisibility);

function resetVisibility(event) {
 var selected = event.target.getAttribute('id');
 for(var i = 0; i < boxItems.length; i++) {
  boxItems[i].classList.remove('box-item--animate');
  boxItems[i].closest('[data-animation]').classList.toggle('is-hidden', !(selected == 'radioAll' || boxItems[i].closest('[data-animation="'+selected+'"]')));
 }
};

External CSS

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/codyhouse-framework-2.0.0.css

External JavaScript

This Pen doesn't use any external JavaScript resources.