Skip to content

Latest commit

 

History

History
78 lines (53 loc) · 2.92 KB

README.md

File metadata and controls

78 lines (53 loc) · 2.92 KB
Raw

Expli

cool and highly customization explosive icons animation. Use it in portfolios, product pages, landing pages, and possibly everything you can imagine!

Screenshots

App Screenshot

App Screenshot

Demo

https://expli.vercel.app

Installation

Install Expli with npm

  npm i expli

Usage/Examples

import { Expli } from 'expli';

function App() {

  const [percentage, setpercentage] = useState(0)
  const [inview, setinview] = useState(false)

  return (
      <Expli
        icons={['./1.png', './2.png']}
        transition={0.2}
        distributionQuadrants={[4, 3, 4, 4]}
        bits={15}
        widthCoverage={0.9}
        heightCoverage={0.9}
        increment={0.001}
        inview={inview}
        percentage={percentage}
        setpercentage={setpercentage}
        maxexpansion={2}
      />
  )
}

API Reference

Parameter Type Description
explode boolean show the explode effect or not, if set to false, the transition parameter doesn't make any difference
transition number Required: the time it takes for all icons to complete the explosion in seconds
distributionQuadrants Array: [p, q, r ,s] Required: number of icons in each quadrant around the container's center. Must sum to bits
bits number Required: number of icons to render overall
widthCoverage number Required: the percentage of x-axis covered by the icons once exploded, between 0 and 1 inclusive, 1 means the icons may reach both the left and right edges of the viewport
heightCoverage number Required: same as widthCoverage but for the y-axis
increment number Required: percentage increase in the explosion during lazy movement, per unit time.
iconSize string Required: size of the icons in CSS format. i.e '24px'
icons Array: [src1, src2...] Required: the array containing image source of each icon.
percentage number Required: the percentage of the explosion completed, a value between 1 and 0 inclusive, useful when using with page scrolls.
maxexpansion number Required: the percentage of the lazy movement once completely exploded, example: 1.5 means it will move unitl it completes 150% of the explosion
setpercentage function the function, i.e useState changer to change the percentage, required for lazy movement
flipIcon boolean flip icons to add make the explosion more random
style Object custom styles for the main container holding icons.
inview boolean should the icons be visible