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

grass: put blade animation stuff in one property

Browse source
This commit is contained in:
mehbark 2023-09-03 09:16:58 -04:00
parent 83964eacb9
commit d980c16507
1 changed files with 4 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
html/blowing-in-the-wind.tsx
View file

@ -41,15 +41,11 @@ const Blade = ({ x, y }: { x: number; y: number }) => (
style={{ style={{
// transformOrigin: "bottom", // transformOrigin: "bottom",
// transform: "translateX(0.5rem)", // transform: "translateX(0.5rem)",
animation: "spin infinite ease-in-out alternate", // putting everything here *drastically* reduces size
animation: `6.5s spin ${blade_delay(x, y).toFixed(
2
)}s infinite ease-in-out alternate`,
transform: "translateX(0.5rem)", transform: "translateX(0.5rem)",
// putting math knowledge to work :D
animationDelay: `${blade_delay(x, y).toFixed(2)}s`,
// having some randomness with the duration is a great idea!!
// maybe not with things being synchronized though!
// animationDuration: `${2.5 + Math.random() * 0}s`,
animationDuration: "6.5s",
color: pick_random(grass_colors), color: pick_random(grass_colors),
// helps the squareness // helps the squareness
overflow: "hidden", overflow: "hidden",