import React, { FunctionComponent } from 'react'
import useAnimateOnShow from '@cjenaro/useanimateonshow'

const Count: FunctionComponent = () => {
  const [Wrapper, ref, props] = useAnimateOnShow({ x: 0 }, { x: 100 })

  return (
    <h1>
      <Wrapper visible={ref}>
        {props.x.interpolate((x) => x.toFixed(2))}
      </Wrapper>
    </h1>
  )
}

export default Count

import React, { FunctionComponent } from 'react'
import useAnimateOnShow from '@cjenaro/useanimateonshow'

const FlyIn: FunctionComponent = ({ children }) => {
  const [Wrapper, ref, props] = useAnimateOnShow(
    { transform: 'translateY(50px) scale(0.5)', opacity: 0 },
    { transform: 'translateY(0px) scale(1)', opacity: 1 }
  )

  return (
    <Wrapper visible={ref} style={props}>
      {children}
    </Wrapper>
  )
}

export default FlyIn

import React, { FunctionComponent } from 'react'
import useAnimateOnShow from '@cjenaro/useanimateonshow'

const SlideIn: FunctionComponent<{ from: 'left' | 'right' }> = ({
  from,
  children
}) => {
  const [Wrapper, ref, props] = useAnimateOnShow(
    {
      transform: `translateX(${100 * (from === 'left' ? 1 : -1)}vw)`
    },
    {
      transform: `translateX(0vw)`
    },
    { infinite: true, onShow: (showing: boolean) => console.log(showing) }
  )

  return (
    <Wrapper visible={ref} style={props}>
      {children}
    </Wrapper>
  )
}

export default SlideIn