Breaking News: Grepper is joining You.com. Read the official announcement!

variants animation framer motion code

Shirshak Kandel answered on October 4, 2022 Popularity 5/10 Helpfulness 9/10

answer variants animation framer motion code

variants animation framer motion code

Comment

//animation.js
export const pageAnimation = {
  hidden: {
    opacity: 0,
  },
  
  show: {
    opacity: 1,

    transition: {
      staggerChildren: 0.5,
      duration: 0.5,
      when: 'beforeChildren',
    },
  },
  exit: {
    opacity: 0,
    transition: { ease: 'easeOut', duration: 0.5 },
  },
}

export const titleAnim = {
  hidden: { y: 50, opacity: 0 },
  show: {
    y: 0,
    opacity: 1,
    transition: { type: 'tween', ease: 'easeOut', duration: 0.75 },
  },
}

export const stagger = {
  hidden: {},
  show: { transition: { staggerChildren: 0.4 } },
};

export const fadeInUp = {
  hidden: { y: 60, opacity: 0 },
  show: { y: 0, opacity: 1, transition: {} },
};

export const fadeInDown = {
  hidden: { y: -60, opacity: 0 },
  show: { y: 0, opacity: 1, transition: {} },
};

export const fade = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { type: 'tween', ease: 'easeOut', duration: 1, delay: 0.5 },
  },
}

export const photoAnim = {
  hidden: { scale: 1.5, opacity: 0 },
  show: {
    scale: 1,
    opacity: 1,
    transition: {
      type: 'tween',
      ease: 'easeOut',
      duration: 1,
      delay: 0.5,
    },
  },
}

export const lineAnim = {
  hidden: { width: '0%' },
  show: {
    width: '100%',
    transition: { duration: 0.5, ease: 'easeOut' },
  },
}

export const slider = {
  hidden: { x: '-130%', skew: '45deg' },
  show: {
    x: '100%',
    skew: '0deg',
    transition: { type: 'tween', ease: 'easeOut', duration: 1 },
  },
}
export const sliderContainer = {
  hidden: {
    opacity: 1,
  },
  show: {
    opacity: 1,

    transition: {
      staggerChildren: 0.15,
      ease: 'easeOut',
      duration: 1,
    },
  },
}
export const movieContainer = {
  hidden: {
    opacity: 0,
  },
  show: {
    opacity: 1,
    transition: {
      staggerChildren: 0.15,
      ease: 'easeOut',
      duration: 1,
      when: 'beforeChildren',
    },
  },
}

export const reveal = {
  hidden: { opacity: 0, scale: 0.9 },
  show: {
    opacity: 1,
    scale: 1,
    transition: {
      type: 'tween',
      ease: 'easeOut',
      duration: 1,
    },
  },
}

Popularity 5/10 Helpfulness 9/10 Language typescript

Source: Grepper

Tags: animation framer-motion typescript variants

Link to this answer
Share Copy Link

Contributed on Oct 04 2022

Shirshak Kandel

0 Answers Avg Quality 2/10

variants animation framer motion code

Contents

More Related Answers

variants animation framer motion code

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.