API Reference

import { Transition } from '@vitus-labs/kinetic'

<Transition
  show={isVisible}
  appear
  enterStyle={{ opacity: 0, transform: 'scale(0.95)' }}
  enterToStyle={{ opacity: 1, transform: 'scale(1)' }}
  enterTransition="all 300ms ease-out"
  leaveStyle={{ opacity: 1, transform: 'scale(1)' }}
  leaveToStyle={{ opacity: 0, transform: 'scale(0.95)' }}
  leaveTransition="all 200ms ease-in"
  onEnter={() => console.log('entering')}
  onAfterEnter={() => console.log('entered')}
  onLeave={() => console.log('leaving')}
  onAfterLeave={() => console.log('left')}
>
  <div>Animated content</div>
</Transition>

import { Collapse } from '@vitus-labs/kinetic'

<Collapse
  show={isExpanded}
  transition="height 300ms ease"
  appear
>
  <div style={{ padding: 16 }}>
    <p>Collapsible content of any height.</p>
    <p>Height is measured automatically.</p>
  </div>
</Collapse>

import { Stagger } from '@vitus-labs/kinetic'
import { slideUp } from '@vitus-labs/kinetic'

<Stagger show={show} interval={60} reverseLeave {...slideUp}>
  <div key="a">First</div>
  <div key="b">Second</div>
  <div key="c">Third</div>
</Stagger>

.stagger-item {
  animation-delay: calc(var(--stagger-index) * var(--stagger-interval));
}

import { TransitionGroup } from '@vitus-labs/kinetic'
import { fade } from '@vitus-labs/kinetic'

<TransitionGroup {...fade} appear>
  {items.map((item) => (
    <div key={item.id}>{item.name}</div>
  ))}
</TransitionGroup>

import { kinetic } from '@vitus-labs/kinetic'

const component = kinetic('div')

const FadeDiv = kinetic('div').preset(fade)

<FadeDiv show={true} appear unmount timeout={3000} className="card">
  content
</FadeDiv>

const Accordion = kinetic('div').collapse({ transition: 'height 400ms ease' })

<Accordion show={true} className="panel">
  content
</Accordion>

const StaggerList = kinetic('ul').preset(slideUp).stagger({ interval: 60 })

<StaggerList show={true}>
  <li key="a">First</li>
  <li key="b">Second</li>
</StaggerList>

const AnimatedList = kinetic('div').preset(fade).group()

<AnimatedList appear>
  {items.map(item => <div key={item.id}>{item.name}</div>)}
</AnimatedList>

import { useTransitionState } from '@vitus-labs/kinetic'

function CustomTransition({ show, children }) {
  const { stage, ref, shouldMount, complete } = useTransitionState({
    show,
    appear: true,
  })

  if (!shouldMount) return null

  return (
    <div
      ref={ref}
      onTransitionEnd={complete}
      style={{
        opacity: stage === 'entering' || stage === 'entered' ? 1 : 0,
        transition: 'opacity 300ms',
      }}
    >
      {children}
    </div>
  )
}

import { useAnimationEnd } from '@vitus-labs/kinetic'

useAnimationEnd({
  ref: elementRef,
  onEnd: () => console.log('animation finished'),
  active: isAnimating,
  timeout: 5000,
})

type Preset = {
  // Style-based
  enterStyle?: CSSProperties
  enterToStyle?: CSSProperties
  enterTransition?: string
  leaveStyle?: CSSProperties
  leaveToStyle?: CSSProperties
  leaveTransition?: string

  // Class-based
  enter?: string
  enterFrom?: string
  enterTo?: string
  leave?: string
  leaveFrom?: string
  leaveTo?: string
}

// Spread onto Transition
<Transition show={show} {...myPreset}>
  <div>content</div>
</Transition>

// Or use with kinetic factory
const AnimatedDiv = kinetic('div').preset(myPreset)