Expli

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

Screenshots

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