collapsing-page

1.2.1 • Public • Published

Collapsing Page Effect

Collapsing page effect on your website

Collapsing Page Effect demonstration

👀 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.

name type description
collapse boolean required setting it to true triggers the collapsing animation
duration number the maximum duration of the animation in milliseconds (8000 by default)
onFinish function a callback function that is executed when the animation is over

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

name type description
excludedElement DOM element a reference to a DOM element that should stay visible after the collapse (it should be a direct child of the body, otherwise it's parents will be collapsed so it will not be visible either)
duration number the maximum duration of the animation in milliseconds (8000 by default)
onFinish function a callback function that is executed when the animation is over

License

MIT © Bonboarding

Readme

Keywords

none

Package Sidebar

Install

npm i collapsing-page

Weekly Downloads

1

Version

1.2.1

License

MIT

Unpacked Size

263 kB

Total Files

6

Last publish

Collaborators

  • bonboarding