mirror of
https://github.com/amitwh/markdown-converter.git
synced 2026-08-02 10:00:17 +05:30
feat(renderer): add motion preset transitions for modals/sidebar/toasts
This commit is contained in:
@@ -0,0 +1,41 @@
|
||||
import type { Transition, Variants } from 'motion/react';
|
||||
|
||||
export const fadeIn: Transition = {
|
||||
duration: 0.2,
|
||||
ease: 'easeOut',
|
||||
};
|
||||
|
||||
export const slideInRight: Variants = {
|
||||
x: '100%',
|
||||
initial: { x: '100%', opacity: 0 },
|
||||
animate: { x: 0, opacity: 1, transition: { duration: 0.3, ease: [0.16, 1, 0.3, 1] } },
|
||||
exit: { x: '100%', opacity: 0, transition: { duration: 0.2, ease: 'easeIn' } },
|
||||
};
|
||||
|
||||
export const modalPop: Variants = {
|
||||
scale: 0.96,
|
||||
opacity: 0,
|
||||
initial: { scale: 0.96, opacity: 0 },
|
||||
animate: { scale: 1, opacity: 1, transition: { duration: 0.2, ease: 'easeOut' } },
|
||||
exit: { scale: 0.96, opacity: 0, transition: { duration: 0.15, ease: 'easeIn' } },
|
||||
};
|
||||
|
||||
export const toastSpring: Transition = {
|
||||
type: 'spring',
|
||||
stiffness: 300,
|
||||
damping: 30,
|
||||
};
|
||||
|
||||
export const sidebarToggle: Transition = {
|
||||
duration: 0.25,
|
||||
ease: 'easeInOut',
|
||||
width: {
|
||||
duration: 0.25,
|
||||
ease: 'easeInOut',
|
||||
},
|
||||
};
|
||||
|
||||
export const tabSwitch: Transition = {
|
||||
duration: 0.2,
|
||||
ease: 'easeOut',
|
||||
};
|
||||
Reference in New Issue
Block a user