diff --git a/src/animations/simple/Wobble.ts b/src/animations/simple/Wobble.ts new file mode 100644 index 0000000..973decc --- /dev/null +++ b/src/animations/simple/Wobble.ts @@ -0,0 +1,52 @@ +import wrapper from "@/HOC/wrapper"; +import { animation, defaults } from "@/lib/defaultConfigs"; + +const rule = ` + from { + transform: none; + } + + 15% { + transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); + } + + 30% { + transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); + } + + 45% { + transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); + } + + 60% { + transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); + } + + 75% { + transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); + } + + to { + transform: none; + } +`; + +let name: string | undefined; +function make() { + return name || (name = animation(rule)); +}; + +export default function Wobble({ + children, + _out, + timeout, + duration = defaults.duration, + delay = defaults.delay, + count = defaults.count, + forever, ...props +} = defaults) { + const effect = { make, duration: timeout === undefined ? duration : timeout, delay, forever, count, style: { animationFillMode: 'both', } }; + // @ts-expect-error(some props are not allowed, this will be fixed later) + return wrapper(props, effect, false, children, true); +}; + diff --git a/src/animations/simple/index.ts b/src/animations/simple/index.ts index dded2f0..fcecb0b 100644 --- a/src/animations/simple/index.ts +++ b/src/animations/simple/index.ts @@ -6,3 +6,5 @@ export * from "./RubberBand"; export * from "./Flash"; export * from "./Tada"; export * from "./Swing"; +export * from "./Spin"; +export * from "./Wobble";