<div>
  <button class="button">Collapse</button>
  
  <div class="content">
    <p class="collapsible">
      <span class="collapsible__content">
This is a block of text that is collapsed through JavaScript using the FLIP Technique and inverse content scaling. The animation is performant at the cost of complexity and set up time.
      </span>
    </p>
    <p>
Praesent nec feugiat enim. In vitae elementum erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae lectus varius ipsum tempor maximus in ac eros. Mauris lacus lorem, elementum non lacus vitae, interdum commodo odio.
    </p>
  </div>
</div>
.collapsible {
  overflow: hidden;
  height: auto;
  transform-origin: top left;
}

.collapsible.collapsed {
  height: 0;
}

.collapsible__content {
  transform-origin: top left;
  display: inline-block;
}

.collapsible.animate-expand {
  animation: collapseAnimation 0.5s linear;
}

.collapsible.animate-collapse {
  animation: collapseAnimation 0.5s linear;
  animation-direction: reverse;
}

.collapsible.animate-expand .collapsible__content {
  animation: collapseContentAnimation 0.5s linear;
}

.collapsible.animate-collapse .collapsible__content {
  animation: collapseContentAnimation 0.5s linear;
  animation-direction: reverse;
}

.animate-on-transform {
  will-change: transform;
  transition: transform 0.5s linear;
}
const button = document.querySelector('.button');

button.addEventListener('click', () => {
  const element = document.querySelector('.collapsible');
  const content = element.querySelector('.collapsible__content');
  const isCollapsed = element.classList.contains('collapsed');
  applyFLIPAnimation();
  
  element.classList.remove('collapsed');
  
  if (isCollapsed) {
    element.classList.add('animate-expand');
  } else {
    element.classList.add('animate-collapse');
  }
  
  const cleanup = () => {
    element.classList.remove('animate-collapse', 'animate-expand');
    element.classList.toggle('collapsed', !isCollapsed);
    element.removeEventListener('animationend', cleanup);
  }
  element.addEventListener('animationend', cleanup)
});

/**
* This is a modified version of the FLIP technique. We're not putting
* the app into the end position before transitioning. It means there are
* more layout calculations, but less than if we were to animate on height
*/
function applyFLIPAnimation() {
  const element = document.querySelector('.collapsible');
  const siblings = Array.from(document.querySelectorAll('.collapsible ~ *'));
  const isCollapsed = element.classList.contains('collapsed');
  
  // Calculate the starting position for each sibling
  const siblingStates = siblings.map(elem => {
    return {
      elem,
      start: elem.getBoundingClientRect()
    }
  })
  
  // Recalculate layout once
  element.classList.toggle('collapsed');
  
  // Calculate the end position for all siblings and set up the transition
  siblingStates.forEach(state => {
    const elem = state.elem;
    const end = elem.getBoundingClientRect();
    let diff = end.top - state.start.top;
    if (isCollapsed) {
      diff = -diff;
    }
    
    const transitionStart = `translateY(${diff}px)`
    const transitionEnd = '';
    
    elem.style.transform = isCollapsed ? transitionStart : transitionEnd;
    
    // clean up based on whichever animation ends first
    elem.addEventListener('transitionend', cleanTransitions);
    element.addEventListener('animationend', cleanTransitions.bind(elem));
    
    requestAnimationFrame(() => {
      // Set the transition
      elem.classList.add('animate-on-transform');
      
      requestAnimationFrame(() => {
        // Trigger the animation
        elem.style.transform = isCollapsed ? transitionEnd : transitionStart;
      })
    })
  });
  
  // Put it back
  element.classList.toggle('collapsed');
}

function cleanTransitions() {
  this.style.transform = '';
  this.classList.remove('animate-on-transform');
  this.removeEventListener('transitionend', cleanTransitions);
}

function injectStyles() {
  const elem = document.createElement('style');
  Object.assign(elem, {
    type: 'text/css',
    innerHTML: createKeyframeAnimation()
  });
  
  document.querySelector('head').appendChild(elem);
}

function calculateCollapsedScale (collapsed, expanded) {
  // We can't use 0s in the divisions, or they can mess up the calcs
  // and give us Infinity/NaNs, so replace them with 1s
  const collapsedCalc = {
    width: Math.max(collapsed.width, 1),
    height: Math.max(collapsed.height, 1)
  }
  
  const expandedCalc = {
    width: Math.max(expanded.width, 1),
    height: Math.max(expanded.height, 1)
  }
  
  return {
    x: collapsedCalc.width / expandedCalc.width,
    y: collapsedCalc.height / expandedCalc.height
  };
}

function createKeyframeAnimation () {
  // Figure out the size of the element when collapsed.
  // We have to force some layout recalculations here
  const element = document.querySelector('.collapsible');
  
  const isCollapsed = element.classList.contains('collapsed');
  element.classList.remove('collapsed');
  
  const expanded = element.getBoundingClientRect();
  element.classList.add('collapsed');
  const collapsed = element.getBoundingClientRect();
  element.classList.toggle('collapsed', isCollapsed);
  
  let {x, y} = calculateCollapsedScale(collapsed, expanded);
  let animation = '';
  let inverseAnimation = '';

  for (let step = 0; step <= 100; step++) {
    // Remap the step value to an eased one.
    // This is currently linear
    let easedStep = step / 100;

    // Calculate the scale of the element.
    const xScale = x + (1 - x) * easedStep;
    const yScale = y + (1 - y) * easedStep;

    animation += `${step}% {
      transform: scale(${xScale}, ${yScale});
    }`;

    // And now the inverse for the contents.
    const invXScale = 1 / xScale;
    const invYScale = 1 / yScale;
    inverseAnimation += `${step}% {
      transform: scale(${invXScale}, ${invYScale});
    }`;

  }

  return `
  @keyframes collapseAnimation {
    ${animation}
  }

  @keyframes collapseContentAnimation {
    ${inverseAnimation}
  }`;
}

window.addEventListener('load', injectStyles);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.