coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: improve physicality of draft bubble (it's the little details)

Browse Source
This commit is contained in:
Tom Moor
2019-08-24 17:43:23 -07:00
parent d96afad6c0
commit 347015cf86
2 changed files with 51 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/components/Sidebar/components/Bubble.js
View File

@ -1,7 +1,7 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { fadeAndScaleIn } from 'shared/styles/animations'; import { bounceIn } from 'shared/styles/animations';
type Props = { type Props = {
count: number, count: number,
@ -12,7 +12,8 @@ const Bubble = ({ count }: Props) => {
}; };
const Count = styled.div` const Count = styled.div`
animation: ${fadeAndScaleIn} 200ms ease; animation: ${bounceIn} 600ms;
transform-origin: center center;
border-radius: 100%; border-radius: 100%;
color: ${props => props.theme.white}; color: ${props => props.theme.white};
background: ${props => props.theme.slateDark}; background: ${props => props.theme.slateDark};
@ -21,11 +22,14 @@ const Count = styled.div`
font-weight: 600; font-weight: 600;
font-size: 9px; font-size: 9px;
line-height: 16px; line-height: 16px;
white-space: nowrap;
vertical-align: baseline;
min-width: 16px; min-width: 16px;
min-height: 16px; min-height: 16px;
text-align: center; text-align: center;
padding: 0 4px; padding: 0 4px;
margin-left: 8px; margin-left: 8px;
user-select: none;
`; `;
export default Bubble; export default Bubble;

45
shared/styles/animations.js
View File

@ -18,6 +18,51 @@ export const fadeAndScaleIn = keyframes`
} }
`; `;
export const bounceIn = keyframes`
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
`;
export const pulsate = keyframes` export const pulsate = keyframes`
0% { opacity: 1; } 0% { opacity: 1; }
50% { opacity: 0.5; } 50% { opacity: 0.5; }