Fold

Demo

What it does

1. 01

   Content is sliced into leaves that rotate in 3D from alternating creases

2. 02

   Light and shade on each leaf follow its angle

3. 03

   Spring physics, so opening and closing can be interrupted mid-fold

4. 04

   Real buttons with arrow-key navigation; find-in-page opens the matching answer

Use it

git clone https://github.com/YagnikBarasiya23/fold-accordion.git
# copy fold.js and fold.css into your project

<link rel="stylesheet" href="fold.css">

<div id="faq">
  <div class="fold-item">
    <h3><button class="fold-trigger" aria-expanded="false">Question</button></h3>
    <div class="fold-panel">
      <div class="fold-content">Answer…</div>
    </div>
  </div>
</div>

<script type="module">
  import Fold from './fold.js';
  const faq = new Fold(document.querySelector('#faq'), { single: true });
</script>

Every option, the technique behind the motion and the accessibility notes are in the README on GitHub

• Web

  03 · Toast stack

  Deck

  Toasts that stack, fan out and flick away.

  • 5.0 KB gzip
  • No dependencies
  • Free · MIT
• Web

  04 · Elastic tooltip

  Tether

  A tooltip hung on an elastic string.

  • 3.8 KB gzip
  • No dependencies
  • Free · MIT