animations.css

.animated {
  animation-duration: 0.2s;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  from {
    // transform: scale(0.99);
    opacity: 0;
  }

  to {
    // transform: scale(1);
    opacity: 1;
  }
}

.fadeIn {
  animation-timing-function: ease-out;
  animation-name: fadeIn;
}


@keyframes fadeOut {
  from {
    // transform: scale(1);
    opacity: 1;
  }

  to {
    // transform: scale(0.95);
    opacity: 0;
  }
}

.fadeOut {
  animation-timing-function: ease-out;
  animation-name: fadeOut;
}

@keyframes fadeOutShrink {
  from {
    max-height: 150px;
    transform: scale(1);
    opacity: 1;
    overflow: scroll;
  }

  to {
    max-height: 0px;
    transform: scale(0);
    opacity: 0;
    overflow: scroll;
    padding: 0px;
    display: none;
  }
}

.fadeOutShrink {
  animation-timing-function: ease-out;
  animation-name: fadeOutShrink;
}

@keyframes fadeInExpand {
  from {
    max-height: 0px;
    transform: scale(0);
    opacity: 0;
    overflow: scroll;
  }

  to {
    max-height: 200px;
    transform: scale(1);
    opacity: 1;
    overflow: scroll;
  }
}

.fadeInExpand {
  animation-timing-function: ease-out;
  animation-name: fadeInExpand;
}

index.html

<input type="text" id="search">
<div id="search-results">
  <!-- render your elements that will be filtered and add data-filter-text field -->
  <div data-filter-text="some random text relevant to this div"></div>
  <div data-filter-text="some random text relevant to this div"></div>
  <div data-filter-text="some random text relevant to this div"></div>
  <div data-filter-text="some random text relevant to this div"></div>
  <div data-filter-text="some random text relevant to this div"></div>
</div>

init_search_filter.js

// define our html elements (so set the id's to something different if you wish)
const searchInput = document.getElementById('search')
const resultsContainer = document.getElementById('search-results')

// define functions
showElement(elem) {
  if (elem.classList.contains('fadeOutShrink')) {
    elem.classList.add('animated','fadeInExpand');
    elem.classList.remove('fadeOutShrink');
  }
}

hideElement(elem) {
  elem.classList.add('animated','fadeOutShrink');
  elem.classList.remove('fadeInExpand');
}

isQueryMatch(text, query) {
  return text.toLowerCase().indexOf(query) !== -1
}

const applyFilter = () => {
  resultsContainer.children.forEach((elem) => {
    var elemText = elem.dataset.filterText; // make sure to add data-filter-text attibute to your 
    if (elemText) {
      isQueryMatch(elemText, query) && showElement(elem)
      !isQueryMatch(elemText, query) && hideElement(elem)
    }
  })
}

const initSearchFilter = () => {
  if (searchInput) {
    searchInput.addEventListener('keyup', (e) => {
      let query = e.currentTarget.value.toLowerCase();
      applyFilter(query);
    })
  }
}
// end define functions

// listen to turbolinks:load event and fire our function when document is ready
document.addEventListener('turbolinks:load', () => {
  // Call your functions here, e.g:
  if (searchInput && resultsContainer) {
    initSearchFilter()
  }
});