Parallax Sections

1"use client";
2 
3import { useRef } from "react";
4 
5import { MotionValue, motion, useScroll, useTransform } from "motion/react";
6 
7interface SectionProps {
8  scrollYProgress: MotionValue;
9}
10export const ParallaxSections = () => {
11  const container = useRef(null);
12  const { scrollYProgress } = useScroll({
13    target: container,
14    offset: ["start start", "end end"],
15  });
16 
17  return (
18    <div ref={container} className="relative h-[200vh] w-full">
19      {/* Change the height of the container according to number of Sections */}
20      <Section1 scrollYProgress={scrollYProgress} />
21      <Section2 scrollYProgress={scrollYProgress} />
22    </div>
23  );
24};
25 
26const Section1 = ({ scrollYProgress }: SectionProps) => {
27  const scale = useTransform(scrollYProgress, [0, 1], [1, 0.8]);
28  const rotate = useTransform(scrollYProgress, [0, 1], [0, -5]);
29 
30  return (
31    <motion.section
32      style={{ scale, rotate }}
33      className="sticky top-0 flex h-screen items-center justify-center bg-neutral-700"
34    >
35      <h1 className="text-5xl font-bold">This section is Cool.</h1>
36    </motion.section>
37  );
38};
39 
40const Section2 = ({ scrollYProgress }: SectionProps) => {
41  const scale = useTransform(scrollYProgress, [0, 1], [0.8, 1]);
42  const rotate = useTransform(scrollYProgress, [0, 1], [-5, 0]); // You can change the rotation if you want to add more sections below to make it look more cooler ;)
43 
44  return (
45    <motion.section
46      style={{ scale, rotate }}
47      className="relative flex h-screen items-center justify-center bg-red-500"
48    >
49      <h1 className="text-5xl font-bold">This is Cooler!</h1>
50    </motion.section>
51  );
52};