Browse Source

landing-blocks/src: different button animation

pull/3/head
remorses 1 year ago
parent
commit
672fffbf73
2 changed files with 36 additions and 40 deletions
  1. +1
    -1
      landing-blocks/src/Button.tsx
  2. +35
    -39
      landing-blocks/src/animations/bouncein.ts

+ 1
- 1
landing-blocks/src/Button.tsx View File

@ -35,7 +35,7 @@ export const Button: FC = forwardRef(
}
const animationCss = useMemo(() => {
if (animate === true) {
return makeAnimationCss(headShake)
return makeAnimationCss(bounceIn)
}
if (animate in animations) {
return makeAnimationCss(animations[animate as string])

+ 35
- 39
landing-blocks/src/animations/bouncein.ts View File

@ -1,45 +1,41 @@
import { cubicBezier, scale3d } from './utils';
import { Keyframe, Animation } from './types';
import { keyframes } from '@emotion/core';
import { cubicBezier, scale3d, getNextPercentage } from './utils'
import { Keyframe, Animation } from './types'
import { keyframes } from '@emotion/core'
const timing: Keyframe = {
animationTimingFunction: cubicBezier(
0.215,
0.610,
0.355,
1.000
)
};
animationTimingFunction: cubicBezier(0.215, 0.61, 0.355, 1.0),
}
const TOTAL = 4
const bounceIn: Animation = {
from: timing,
'0%': {
opacity: 0,
transform: scale3d(0.3, 0.3, 0.3)
},
'20%': {
...timing,
transform: scale3d(1.1, 1.1, 1.1)
},
'40%': {
...timing,
transform: scale3d(0.9, 0.9, 0.9)
},
'60%': {
...timing,
opacity: 1,
transform: scale3d(1.03, 1.03, 1.03)
},
'80%': {
...timing,
transform: scale3d(0.97, 0.97, 0.97)
},
to: {
...timing,
opacity: 1,
transform: scale3d(1, 1, 1)
}
};
from: timing,
[getNextPercentage(0, TOTAL)]: {
opacity: 0,
transform: scale3d(0.3, 0.3, 0.3),
},
[getNextPercentage(1, TOTAL)]: {
...timing,
transform: scale3d(1.1, 1.1, 1.1),
},
[getNextPercentage(2, TOTAL)]: {
...timing,
transform: scale3d(0.9, 0.9, 0.9),
},
[getNextPercentage(3, TOTAL)]: {
...timing,
opacity: 1,
transform: scale3d(1.03, 1.03, 1.03),
},
[getNextPercentage(4, TOTAL)]: {
...timing,
transform: scale3d(0.97, 0.97, 0.97),
},
to: {
...timing,
opacity: 1,
transform: scale3d(1, 1, 1),
},
}
export default keyframes`${bounceIn}`

Loading…
Cancel
Save