From 4d769f42e1f5e82338ae0a3ff84dbfd9263d4c26 Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Fri, 21 Jan 2022 09:06:55 +0100 Subject: [PATCH] fix(settings): added bezier curve to animations --- .../common/messaging/bars/JumpToBottom.tsx | 15 +++++++ src/pages/settings/GenericSettings.tsx | 2 +- src/pages/settings/Settings.module.scss | 44 +++++++++---------- 3 files changed, 37 insertions(+), 24 deletions(-) diff --git a/src/components/common/messaging/bars/JumpToBottom.tsx b/src/components/common/messaging/bars/JumpToBottom.tsx index 98420b96..bb44207a 100644 --- a/src/components/common/messaging/bars/JumpToBottom.tsx +++ b/src/components/common/messaging/bars/JumpToBottom.tsx @@ -13,6 +13,21 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>` z-index: 1; position: relative; + @keyframes bounce-from-bottom { + 0% { + transform: translateY(33px); + } + 100% { + transform: translateY(0px); + } + } + + animation-name: bounce-from-bottom; + animation-duration: 340ms; + animation-delay: 0ms; + animation-timing-function: cubic-bezier(0.2, 0.9, 0.5, 1.16); + animation-fill-mode: forwards; + ${(props) => props.position === "top" && css` diff --git a/src/pages/settings/GenericSettings.tsx b/src/pages/settings/GenericSettings.tsx index e2397479..dc665d30 100644 --- a/src/pages/settings/GenericSettings.tsx +++ b/src/pages/settings/GenericSettings.tsx @@ -65,7 +65,7 @@ export function GenericSettings({ setTimeout(() => { history.replace(state.layout.getLastPath()); - }, 100); + }, 200); }, [history]); useEffect(() => { diff --git a/src/pages/settings/Settings.module.scss b/src/pages/settings/Settings.module.scss index 8e07de9e..8429ea90 100644 --- a/src/pages/settings/Settings.module.scss +++ b/src/pages/settings/Settings.module.scss @@ -4,33 +4,31 @@ transform: scale(1.2); opacity: 0; } - 100% { - transform: scale(1); - opacity: 1; - } -} - -@keyframes close { - 0% { - transform: scale(1); - opacity: 1; - } - 100% { - transform: scale(1.2); - opacity: 0; - } -} - -@keyframes opacity { - 0% { - opacity: 0; - } 20% { opacity: 0.5; } 50% { opacity: 1; } + 100% { + transform: scale(1); + } +} + +@keyframes close { + 0% { + transform: scale(1); + } + 20% { + opacity: 1; + } + 50% { + opacity: 0.5; + } + 100% { + opacity: 0; + transform: scale(1.2); + } } /* Settings CSS */ @@ -84,10 +82,10 @@ width: 100%; height: 100%; position: fixed; - animation: open 0.18s ease-out, opacity 0.18s; + animation: open 340ms cubic-bezier(0.2, 0.9, 0.5, 1.16) forwards; &.closing { - animation: close 0.18s ease-in; + animation: close 340ms cubic-bezier(0.5, 0, 0.8, 0.11); } .scrollbox::-webkit-scrollbar-thumb {