102 lines
1.6 KiB
TypeScript
102 lines
1.6 KiB
TypeScript
import { stagger, Variants } from "motion/react";
|
|
|
|
/**
|
|
* Container
|
|
*/
|
|
export const staggerContainer: Variants = {
|
|
hidden: {},
|
|
visible: {
|
|
transition: {
|
|
delayChildren: stagger(0.15),
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
* Basic entrances
|
|
*/
|
|
export const fadeInUp: Variants = {
|
|
hidden: { opacity: 0, y: 24 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: {
|
|
duration: 0.6,
|
|
ease: [0.22, 1, 0.36, 1], // premium easeOut
|
|
},
|
|
},
|
|
};
|
|
|
|
export const fadeInDown: Variants = {
|
|
hidden: { opacity: 0, y: -24 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: {
|
|
duration: 0.6,
|
|
ease: [0.22, 1, 0.36, 1],
|
|
},
|
|
},
|
|
};
|
|
|
|
export const fadeIn: Variants = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: { duration: 0.6, ease: "easeOut" },
|
|
},
|
|
};
|
|
|
|
/**
|
|
* Cards
|
|
*/
|
|
export const cardReveal: Variants = {
|
|
hidden: { opacity: 0, y: 30, scale: 0.96 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
scale: 1,
|
|
transition: {
|
|
duration: 0.5,
|
|
ease: [0.22, 1, 0.36, 1],
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
* Timeline
|
|
*/
|
|
export const timelineItemLeft: Variants = {
|
|
hidden: { opacity: 0, x: -40 },
|
|
visible: {
|
|
opacity: 1,
|
|
x: 0,
|
|
transition: { duration: 0.5, ease: "easeOut" },
|
|
},
|
|
};
|
|
|
|
export const timelineItemRight: Variants = {
|
|
hidden: { opacity: 0, x: 40 },
|
|
visible: {
|
|
opacity: 1,
|
|
x: 0,
|
|
transition: { duration: 0.5, ease: "easeOut" },
|
|
},
|
|
};
|
|
|
|
/**
|
|
* Decorative / ambient
|
|
*/
|
|
export const slowFloat: Variants = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: [0, -10, 0],
|
|
transition: {
|
|
duration: 6,
|
|
repeat: Infinity,
|
|
ease: "easeInOut",
|
|
},
|
|
},
|
|
};
|