Always run hero rotator regardless of prefers-reduced-motion; snappier animation
Changes
@@@ -240,23 +240,23 @@`<i class="fa-solid fa-users"></i> Management / Leadership`];const rot = document.querySelector(".hero__rotator");-- if (rot && !window.matchMedia("(prefers-reduced-motion: reduce)").matches) {++ if (rot) {let i = 0;setInterval(() => {i = (i + 1) % roles.length;(rot as HTMLElement).animate(-- [{ opacity: 1, transform: "translateY(0)" },-- { opacity: 0, transform: "translateY(-6px)" }],-- { duration: 280, easing: "ease-in", fill: "forwards" }++ [{ opacity: 1, transform: "translateY(0) scale(1)" },++ { opacity: 0, transform: "translateY(-10px) scale(0.96)" }],++ { duration: 240, easing: "ease-in", fill: "forwards" }).onfinish = () => {rot.innerHTML = roles[i];(rot as HTMLElement).animate(-- [{ opacity: 0, transform: "translateY(6px)" },-- { opacity: 1, transform: "translateY(0)" }],-- { duration: 280, easing: "ease-out", fill: "forwards" }++ [{ opacity: 0, transform: "translateY(10px) scale(0.96)" },++ { opacity: 1, transform: "translateY(0) scale(1)" }],++ { duration: 300, easing: "cubic-bezier(0.22,1,0.36,1)", fill: "forwards" });};-- }, 2600);++ }, 2400);}// Mountain parallax
@@ -240,23 +240,23 @@
@@ -240,23 +240,23 @@
`<i class="fa-solid fa-users"></i> Management / Leadership`
`<i class="fa-solid fa-users"></i> Management / Leadership`
];
];
const rot = document.querySelector(".hero__rotator");
const rot = document.querySelector(".hero__rotator");
- if (rot && !window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+ if (rot) {
let i = 0;
let i = 0;
setInterval(() => {
setInterval(() => {
i = (i + 1) % roles.length;
i = (i + 1) % roles.length;
(rot as HTMLElement).animate(
(rot as HTMLElement).animate(
- [{ opacity: 1, transform: "translateY(0)" },
- { opacity: 0, transform: "translateY(-6px)" }],
- { duration: 280, easing: "ease-in", fill: "forwards" }
+ [{ opacity: 1, transform: "translateY(0) scale(1)" },
+ { opacity: 0, transform: "translateY(-10px) scale(0.96)" }],
+ { duration: 240, easing: "ease-in", fill: "forwards" }
).onfinish = () => {
).onfinish = () => {
rot.innerHTML = roles[i];
rot.innerHTML = roles[i];
(rot as HTMLElement).animate(
(rot as HTMLElement).animate(
- [{ opacity: 0, transform: "translateY(6px)" },
- { opacity: 1, transform: "translateY(0)" }],
- { duration: 280, easing: "ease-out", fill: "forwards" }
+ [{ opacity: 0, transform: "translateY(10px) scale(0.96)" },
+ { opacity: 1, transform: "translateY(0) scale(1)" }],
+ { duration: 300, easing: "cubic-bezier(0.22,1,0.36,1)", fill: "forwards" }
);
);
};
};
- }, 2600);
+ }, 2400);
}
}
// Mountain parallax
// Mountain parallax