XavierOliveira/Plataforma-de-Tutoriais
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Adding animations

Browse Source
This commit is contained in:
Xavier Oliveira
2026-06-01 16:52:28 +01:00
parent 985f5ffb69
commit bcaff422a0
19 changed files with 528 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
frontend-plataforma-tutoriais/src/utils/pageMotionVariants.ts Normal file
View File

@@ -0,0 +1,70 @@
import type { Transition, Variants } from "framer-motion";
export const viewportOnce = { once: true };
export const pageTitleVariants: Variants = {
initial: { opacity: 0, y: -50 },
animate: { opacity: 1, y: 0 },
};
export const slideFromLeftVariants: Variants = {
initial: { opacity: 0, x: -50 },
animate: { opacity: 1, x: 0 },
};
export const slideFromRightVariants: Variants = {
initial: { opacity: 0, x: 50 },
animate: { opacity: 1, x: 0 },
};
export const slideFromBottomVariants: Variants = {
initial: { opacity: 0, y: 70 },
animate: { opacity: 1, y: 0 },
};
export const slideFromTopVariants: Variants = {
initial: { opacity: 0, y: -50 },
animate: { opacity: 1, y: 0 },
};
export const fadeVariants: Variants = {
initial: { opacity: 0 },
animate: { opacity: 1 },
exit: { opacity: 0 },
};
export const cardInViewVariants: Variants = {
initial: { opacity: 0, y: 50 },
animate: { opacity: 1, y: 0 },
};
export const dropdownVariants: Variants = {
initial: { opacity: 0, y: -10, scale: 0.98 },
animate: { opacity: 1, y: 0, scale: 1 },
exit: { opacity: 0, y: -10, scale: 0.98 },
};
export const listContentVariants: Variants = {
initial: { opacity: 0, y: 70 },
animate: { opacity: 1, y: 0 },
exit: { opacity: 0, y: 30 },
};
export const pageTitleTransition: Transition = { duration: 0.5, delay: 0.1 };
export const slideFromLeftTransition: Transition = { duration: 0.5, delay: 0.2 };
export const slideFromLeftTransitionNoDelay: Transition = { duration: 0.5 };
export const slideFromLeftOnMountTransition: Transition = { duration: 0.5, delay: 0.1 };
export const slideFromRightOnMountTransition02: Transition = { duration: 0.5, delay: 0.2 };
export const slideFromLeftInViewTransition03: Transition = { duration: 0.5, delay: 0.3 };
export const slideFromRightTransition: Transition = { duration: 0.5, delay: 0.3 };
export const slideFromRightInViewTransition04: Transition = { duration: 0.5, delay: 0.4 };
export const slideFromBottomTransition: Transition = { duration: 0.5, delay: 0.4 };
export const slideFromBottomInViewTransition: Transition = { duration: 0.5, delay: 0.1 };
export const slideFromRightOnMountTransition: Transition = { duration: 0.5, delay: 0.5 };
export const slideFromTopTransition: Transition = { duration: 0.5 };
export const slideFromTopTransitionDelayed: Transition = { duration: 0.5, delay: 0.1 };
export const cardInViewTransition: Transition = { duration: 0.5, delay: 0.1 };
export const dropdownTransition: Transition = { duration: 0.2, ease: "easeOut" };
export const listContentTransition: Transition = { duration: 0.4, ease: "easeOut" };
export const fadeTransition: Transition = { duration: 0.15 };