cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-12 18:29:57 -05:00
Code Issues Projects Releases Packages Wiki Activity

fix(settings): added bezier curve to animations

Browse source
This commit is contained in:
trashtemp 2022-01-21 09:06:55 +01:00
parent 622f2b2bca
commit 4d769f42e1
No known key found for this signature in database
GPG key ID: D1F0DB65081B0FC6
3 changed files with 37 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/common/messaging/bars/JumpToBottom.tsx
View file

@ -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`

2
src/pages/settings/GenericSettings.tsx
View file

@ -65,7 +65,7 @@ export function GenericSettings({
setTimeout(() => {
history.replace(state.layout.getLastPath());
}, 100);
}, 200);
}, [history]);
useEffect(() => {

44
src/pages/settings/Settings.module.scss
View file

@ -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 {