FLIP_KEYFRAMESconstant
What the sheet does as it goes: from lying on the pad (the first frame) to gone (the last).
Import it
import { FLIP_KEYFRAMES } from "@johnmorrisdotca/koyomi-calendars/animate";Definition
const FLIP_KEYFRAMES: Record<"tear-down" | "fly-up" | "rip-corner" | "flip-down", { frames: Frame[]; origin: string; easing: string; perspective?: number; }> = {
"tear-down": {
origin: "50% 0%",
easing: "cubic-bezier(.5,0,.9,.6)",
frames: [
{ transform: "translate(0,0) rotate(0deg)", opacity: 1 },
{ transform: "translate(0,3%) rotate(-1.5deg)", opacity: 1, offset: 0.22 },
{ transform: "translate(2%,125%) rotate(7deg)", opacity: 0.9 },
],
},
"fly-up": {
origin: "50% 100%",
easing: "cubic-bezier(.4,0,.8,.5)",
frames: [
{ transform: "translate(0,0) rotate(0deg) scale(1)", opacity: 1 },
{ transform: "translate(0,4%) rotate(0deg) scale(.98)", opacity: 1, offset: 0.18 },
{ transform: "translate(-4%,-135%) rotate(-9deg) scale(.9)", opacity: 0.9 },
],
},
"rip-corner": {
origin: "0% 0%",
easing: "cubic-bezier(.45,0,.85,.55)",
frames: [
{ transform: "translate(0,0) rotate(0deg)", opacity: 1 },
{ transform: "translate(-1%,1%) rotate(-7deg)", opacity: 1, offset: 0.3 },
{ transform: "translate(-45%,-95%) rotate(-62deg)", opacity: 0.85 },
],
},
"flip-down": {
origin: "50% 100%",
easing: "cubic-bezier(.45,0,.75,.5)",
perspective: 900,
frames: [
{ transform: "rotateX(0deg)", opacity: 1 },
{ transform: "rotateX(-70deg)", opacity: 1, offset: 0.6 },
{ transform: "rotateX(-120deg)", opacity: 0 },
],
},
}Members
| Name | Type | Description |
|---|---|---|
tear-down | { frames: Frame[]; origin: string; easing: string; perspective?: number; } | |
fly-up | { frames: Frame[]; origin: string; easing: string; perspective?: number; } | |
rip-corner | { frames: Frame[]; origin: string; easing: string; perspective?: number; } | |
flip-down | { frames: Frame[]; origin: string; easing: string; perspective?: number; } |
Examples
import { FLIP_KEYFRAMES } from "@johnmorrisdotca/koyomi-calendars/animate";
console.log(FLIP_KEYFRAMES["fly-up"].frames.length, FLIP_KEYFRAMES["fly-up"].easing);3 cubic-bezier(.4,0,.8,.5)What it prints (run when this page was built)