document.addEventListener("DOMContentLoaded", (event) => {
- gsap.registerPlugin(ScrollTrigger,ScrollSmoother)
+ gsap.registerPlugin(ScrollTrigger);
- gsap.utils.toArray(".animate-header").forEach((header) => {
- gsap.from(header, {
- scrollTrigger: {
- trigger: header,
- start: "top 80%",
- toggleActions: "play none none none",
- },
- y: 50,
- opacity: 0,
- duration: 1,
- ease: "power2.out",
+ gsap.matchMedia().add("(prefers-reduced-motion: no-preference)", () => {
+ gsap.utils.toArray(".animate-header").forEach((header) => {
+ gsap.from(header, {
+ scrollTrigger: {
+ trigger: header,
+ start: "top 80%",
+ toggleActions: "play none none none",
+ },
+ y: 50,
+ opacity: 0,
+ duration: 1,
+ ease: "power2.out",
+ });
+ });
+
+ gsap.utils.toArray("figure[data-parallax]").forEach((figure) => {
+ const motion = Number(figure.dataset.parallax);
+ if (!Number.isFinite(motion) || motion === 0) return;
+
+ const frame = figure.querySelector(".photography-frame");
+
+ gsap.fromTo(figure, {
+ y: () => frame.offsetHeight * motion / 200,
+ }, {
+ y: () => -frame.offsetHeight * motion / 200,
+ ease: "none",
+ scrollTrigger: {
+ trigger: figure,
+ start: "clamp(top bottom)",
+ end: "clamp(bottom top)",
+ scrub: true,
+ invalidateOnRefresh: true,
+ },
+ });
});
});
});