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

   <div>
    <div class="flex flex-wrap gap-md js-input-wrapper">
     <div class="flex items-center">
      <input type="radio" name="radioButton" id="radioAll" checked>
      <label for="radioAll" class="text-sm margin-left-xxs">show all</label>
     </div>
     <div class="flex items-center">
      <input type="radio" name="radioButton" id="radioLinear">
      <label for="radioLinear" class="text-sm margin-left-xxs">linear</label>
     </div>
     <div class="flex items-center">
      <input type="radio" name="radioButton" id="radioEaseOutBack">
      <label for="radioEaseOutBack" class="text-sm margin-left-xxs">ease-out-back</label>
     </div>
     <div class="flex items-center">
      <input type="radio" name="radioButton" id="radioEaseInOut">
      <label for="radioEaseInOut" class="text-sm margin-left-xxs">ease-in-out</label>
     </div>
     <div class="flex items-center">
      <input type="radio" name="radioButton" id="radioEaseIn">
      <label for="radioEaseIn" class="text-sm margin-left-xxs">ease-in</label>
     </div>
     <div class="flex items-center">
      <input type="radio" name="radioButton" id="radioEaseOut">
      <label for="radioEaseOut" class="text-sm margin-left-xxs">ease-out</label>
     </div>
    </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="radioEaseOutBack">
  <p class="text-sm margin-y-xs">ease-out-back</p>
  <div class="box-item box-item--ease-out-back"></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);
 border-radius: var(--radius-md);
 transition: transform 1s;
 margin-bottom: var(--space-md);
}

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

.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)));
}
View Compiled 
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://codepen.io/codyhouse/pen/oNxLjqp.scss
  2. https://unpkg.com/codyhouse-framework/main/assets/css/style.css

External JavaScript

This Pen doesn't use any external JavaScript resources.