collapsing-page v1.2.1

Collapsing page effect on your website

👀 Or try it yourself, by clicking on the Logout button in the demo page.

Installation

npm install --save collapsing-page

Usage

import React, { useState } from 'react';
import CollapsingPage from 'collapsing-page';

const Example = () => {
  const [collapse, setCollapse] = useState(false);

  return (
    <React.Fragment>
      <button type="button" onClick={() => setCollapse(true)}>
        Destroy page
      </button>

      <CollapsingPage collapse={collapse}>
        <div className="after-collapse">
          <h1>This will stay when everything else's gone</h1>
        </div>
      </CollapsingPage>
    </React.Fragment>
  );
};

The children of the CollapsingPage component will stay visible after the collapse.

⚠️ Note: to keep the children visible after the collapse, set their position to fixed and a z-index: -1 to make it look cool.

You can find a fully-working example in the example folder.

Props

The only prop that's required is collapse which is a boolean.
Once it's changing to true, the collapse effect starts animating.

Using without React

If you don't use React, you can still execute the collapsing page animation.

import { collapsePage } from 'collapsing-page';

function logout() {
  collapsePage({
    excludedElement: document.querySelector('#goodbye'),
    onFinish: function () {
      alert('See you soon!');
    }
  });
}

Parameters

License

MIT © Bonboarding