mbk/cohost
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

good enough animation

Browse source 
now for twitter imitation
This commit is contained in:
mehbark 2023-07-10 16:50:36 -04:00
parent d51763dfc3
commit 3de300ffa5
1 changed files with 20 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
html/hot_people_who_eat_croissants_are_dangerous.tsx
View file

@ -1,4 +1,4 @@
import { Html, debug_render } from "./html.ts"; import { Html, debug_render, render } from "./html.ts";
import { Component } from "./jsx/jsx-runtime.ts"; import { Component } from "./jsx/jsx-runtime.ts";
const peopleify = (...people: string[]): string[] => const peopleify = (...people: string[]): string[] =>
@ -6,10 +6,10 @@ const peopleify = (...people: string[]): string[] =>
const animation_length = (num_items: number): number => num_items / 5; const animation_length = (num_items: number): number => num_items / 5;
const wheel_style = (num_items: number, delay_seconds = 0): string => const wheel_style = (num_items: number): string =>
`transform: translateY(calc(2rem * -${num_items})); animation: ${animation_length( `transform: translateY(calc(2rem * -${num_items})); animation: ${animation_length(
num_items num_items
)}s 0s ease-in-out reverse none running spin; animation-delay: ${delay_seconds}s;`; )}s ease-in-out reverse none running spin;`;
const get_delays = (...lengths: number[]): number[] => { const get_delays = (...lengths: number[]): number[] => {
let out = [0]; let out = [0];
@ -18,34 +18,27 @@ const get_delays = (...lengths: number[]): number[] => {
} }
return out; return out;
}; };
const Wheel: Component = ({ delay_seconds }, children) => (
<div class="wheel"> const Wheel: Component = ({ items }, _) => (
<div <details class="wheel">
class="wheel-inner" <summary>
style={wheel_style(children.length, delay_seconds)} {...items.map((i: string) => <div class="wheel-item">{i}</div>)}
> </summary>
<div class="wheel-item empty"></div> <div class="wheel-inner" style={wheel_style(items.length)}>
{...children.map(i => <div class="wheel-item">{i}</div>)} {/* <div class="wheel-item empty"></div> */}
{...items.map((i: string) => <div class="wheel-item">{i}</div>)}
</div> </div>
</div> </details>
); );
// i'll probably just hardcode the delays... lame but w/e // i'll probably just hardcode the delays... lame but w/e
const Take: Component = ({ subjects, objects, adjectives }, _) => { const Take: Component = ({ subjects, objects, adjectives }, _) => (
const [d1, d2, d3] = get_delays( <div class="take">
subjects.length, <Wheel items={subjects} /> <div class="bridge">who eat</div>{" "}
objects.length, <Wheel items={objects} /> <div class="bridge">are</div>{" "}
adjectives.length <Wheel items={adjectives} />
); </div>
console.log(get_delays(subjects.length, objects.length, adjectives.length)); );
return (
<div class="take">
<Wheel delay_seconds={d1}>{...subjects}</Wheel> who eat{" "}
<Wheel delay_seconds={d2}>{...objects}</Wheel> are{" "}
<Wheel delay_seconds={d3}>{...adjectives}</Wheel>
</div>
);
};
// might want to have the final item be seperate // might want to have the final item be seperate
// turned out to be unnecessary // turned out to be unnecessary