rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: modal effects

Browse source
This commit is contained in:
swve 2022-11-11 17:46:06 +01:00
parent c70f7361ce
commit 938cfcb4b3
4 changed files with 51 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

20
front/components/modals/Modal.tsx
View file

@ -1,11 +1,27 @@
import React from "react";
import styled from "styled-components";
import { motion, AnimatePresence } from "framer-motion";
function Modal(props: any) {
return (
<div>
<Overlay>
<Content>{props.children}</Content>
<AnimatePresence>
<motion.div
initial={{ opacity: 0, left: "50%", top: "50%", scale: 0.9, backdropFilter: "blur(10px)", y: -1, position: "absolute" }}
animate={{ opacity: 1, left: "50%", top: "50%", scale: 1, backdropFilter: "blur(10px)", y: 0, position: "absolute" }}
key="modal"
transition={{
type: "spring",
stiffness: 360,
damping: 70,
delay: 0.02,
}}
exit={{ opacity: 0, left: "50%", top: "46%", backdropFilter: "blur(10px)", y: -1, position: "absolute" }}
>
<Content>{props.children}</Content>
</motion.div>
</AnimatePresence>
</Overlay>
</div>
);
@ -17,7 +33,6 @@ const Overlay = styled.div`
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 100;
`;
@ -31,5 +46,6 @@ const Content = styled.div`
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 64px 84px 15px rgb(0 0 0 / 10%);
`;
export default Modal;