I’m trying to implement the animation similar to the reference using gsap with useGSAP. Unfortunately, my knowledge on gsap is not much (I’m actually beginner), thus cannot really get the animation done correctly.

It does not animate the cards correctly when I scroll down. I checked the documentation, but cannot really use the opacity correctly.

The output should be like:

Here is a part of my code:

export default function Services() {
    const container = useRef(null);
    const cardRefs = useRef([]); // Initialize as an array
    const boxRef = useRef(null);

    useGSAP(() => {
        ScrollSmoother.create({
            trigger: container.current,
            content: container.current,
            pin: true,
            start: 'center center',
            end: '+=500',
            markers: true,
        });

        cardRefs.current.forEach((ref) => {
            gsap.from(ref, {
                opacity: 0,
                y: 50,
                duration: 2,
                ease: 'power2.out',
                scrollTrigger: {
                    trigger: ref,
                    start: 'top 85%', // Adjust to start earlier/later based on your layout
                    end: 'bottom 10%', // Ensure it ends when the bottom of the element is near the top
                    toggleActions: 'play none none reset', // Reset when out of view so it can be triggered again
                    markers: true, // Optional: Adds markers to visualize the trigger points
                },
            });
        });
    });

    return (
        <div className={styles.container} ref={container}>
            <div className={styles.services}>
                {SERVICES.map((service, index) => (
                    <div
                        key={service.title}
                        className={styles.card_item}
                        ref={(el) => (cardRefs.current[index] = el)}
                    >
                        <div className={styles.images}>
                            <img src={service.image} alt={service.title} />
                        </div>
                        <div className={styles.description_container}>
                            <p className={styles.card_item_title}>{service.title}</p>
                            <p className={styles.card_item_description}>{service.description}</p>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}

Working example is in my codesandbox

So, there are two things I would like to find out:

1. How the get the correct scroll effect, as seen from reference it is smooth, but in my example it looks weirder.
2. Why this container acts like position: absolute? In my original website I have other elements of landing page on top of this if I apply content: container.current, to ScrollSmoother.
3. Is there any way to get the background animation using gsap? I’m quite new and trying to experiment to get the same result.

If there is any other information needed please let me know.

Happy coding!