React + GSAP full-screen scroll slideshow with animated sidebar navigation and smooth scroll triggered animations, fully customizable through props
import React from "react";
import { FullScreenScrollFX, FullScreenFXAPI } from "@/components/ui/full-screen-scroll-fx";
const sections = [
{
leftLabel: "Silence",
title: <>Absence</>,
rightLabel: "Silence",
background: "https://cdn.21st.dev/assets/mirror/25/2585dc7b94bccd4e7e1563adf7c49b1736bbc2c72c0a679839e14cccec86732c.jpg",
audioSrc: "/sfx/click-01.mp3",
},
{
leftLabel: "Essence",
title: <>Stillness</>,
rightLabel: "Essence",
background: "https://cdn.21st.dev/assets/mirror/a8/a80c2e08f6ff1d61e187a0680491a5a6adfa759246e773ce2e07a79e38b2c9fd.jpg",
audioSrc: "/sfx/whoosh-02.mp3",
},
{
leftLabel: "Rebirth",
title: <>Growth</>,
rightLabel: "Rebirth",
background: "https://cdn.21st.dev/assets/mirror/e6/e6522958d3a75757d5c9b65b066676fe523d45840d6136c5f7938667683d0b13.jpg",
audioSrc: "/sfx/whoosh-02.mp3",
},
{
leftLabel: "Change",
title: <>Opportunity</>,
rightLabel: "Change",
background: "https://cdn.21st.dev/assets/mirror/73/73b6aeebbe8634633ffede7c9448bfca20873ecaff295242565cadf0106b9be1.jpg",
audioSrc: "/sfx/whoosh-02.mp3",
},
// ...
];
export default function DemoOne() {
const apiRef = React.useRef<FullScreenFXAPI>(null);
return (
<>
<FullScreenScrollFX
sections={ sections }
header={<><div>The Creative</div><div>Process</div></>}
footer={<div></div>}
showProgress
durations={{ change: 0.7, snap: 800 }}
/>
</>
);
}