Motion Utils

motion_utils.md

Funções Auxiliares para Animações com Framer Motion

Neste Gist, apresento algumas funções auxiliares que podem ser usadas com a biblioteca Framer Motion para criar animações pré-definidas, como fade in e slide. Você pode importar essas funções em seu projeto Framer Motion e usá-las para criar animações de forma mais fácil e rápida.

Observação: Certifique-se de importar a biblioteca Framer Motion em seu projeto antes de usar essas funções.

export const textVariant = (delay = 0) => {
  return {
    hidden: {
      y: -50,
      opacity: 0
    },
    show: {
      y: 0,
      opacity: 1,
      transition: {
        type: 'spring',
        duration: 1.25,
        delay
      }
    }
  }
}

export const fadeIn = (
  direction: string,
  type: string,
  delay = 0,
  duration = 0.3
) => {
  return {
    hidden: {
      x: direction === 'left' ? 100 : direction === 'right' ? -100 : 0,
      y: direction === 'up' ? 100 : direction === 'down' ? -100 : 0,
      opacity: 0
    },
    show: {
      x: 0,
      y: 0,
      opacity: 1,
      transition: {
        type,
        delay,
        duration,
        ease: 'easeOut'
      }
    }
  }
}

export const zoomIn = (delay = 0, duration = 0.3) => {
  return {
    hidden: {
      scale: 0,
      opacity: 0
    },
    show: {
      scale: 1,
      opacity: 1,
      transition: {
        type: 'tween',
        delay,
        duration,
        ease: 'easeOut'
      }
    }
  }
}

export const slideIn = (
  direction: string,
  type: string,
  delay = 0,
  duration = 0.3
) => {
  return {
    hidden: {
      x: direction === 'left' ? '-100%' : direction === 'right' ? '100%' : 0,
      y: direction === 'up' ? '100%' : direction === 'down' ? '100%' : 0
    },
    show: {
      x: 0,
      y: 0,
      transition: {
        type,
        delay,
        duration,
        ease: 'easeOut'
      }
    }
  }
}

export const staggerContainer = (staggerChildren = 0, delayChildren = 0) => {
  return {
    hidden: {},
    show: {
      transition: {
        staggerChildren,
        delayChildren
      }
    }
  }
}