Fade edge
Fade edge
A strip that scrolls sideways fades out where there is more to see. Drag it and compare the modes.
Drag the strip with a mouse, scroll it with a trackpad or Shift and the wheel, or focus it and press ←→.
Scroll and fixed
In scroll mode each fade grows with the distance left to scroll, so it fades in as you leave the start and fades out as you reach the end. In fixed mode a side is either fully faded or not faded at all.
Smooth and linear
smooth eases the mask in and out, so the edge has no visible start. linear is a straight ramp, a little harder at its inner end.
import { createFadeEdge } from "@reuse-sh/gradients";
const strip = document.querySelector(".prints");
const fade = createFadeEdge(strip, { size: 64, curve: "smooth", mode: "scroll" });
// Change it later, or remove it with the strip.
fade.update({ mode: "fixed" });
fade.destroy();import { createFadeEdge } from "@reuse-sh/gradients";
import { useEffect, useRef } from "react";
export function Prints({ prints, mode = "scroll" }) {
const ref = useRef(null);
useEffect(() => {
const fade = createFadeEdge(ref.current, { size: 64, mode });
return () => fade.destroy();
}, [mode]);
return <div ref={ref} className="prints">{prints.map(renderPrint)}</div>;
}Read https://reuse.sh/easing-gradients/guide.md and build a sideways strip with a fade edge like https://reuse.sh/easing-gradients/examples/fade-edge. Keep the principles the guide lists.