[Multiple ScrollTrigger animations in React]

Thank you both so much, that's a perfect solution @Rodrigo

[Multiple ScrollTrigger animations in React]

Thanks @mvaneijgen. I think I've updated it now, apologies. I don't usually use it

[Multiple ScrollTrigger animations in React]

Hi,

I'm trying to recreate the text animation on scroll from here: https://www.designbridge.com/about

There are full height sections with the text being position:fixed. It looks like the sections as they scroll in and out of view manage the opacity.

 

My attempt can be found here: https://codesandbox.io/s/uv9bws?file=/src/components/Home/Hero.tsx

 

/* eslint-disable array-callback-return */
import { gsap } from 'gsap/dist/gsap';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
import { useLayoutEffect, useRef } from 'react';
import styled from 'styled-components';

gsap.registerPlugin(ScrollTrigger);

const slides = [
  {
    id: 1,
    message: 'text line one',
  },
  {
    id: 2,
    message: 'text line two',
  },
];

const StyledHero = styled.section`
  background-color: var(--primary-colour);
  color: var(--primary-white);
`;

const StyledSlide = styled.div`
  background-color: var(--primary-colour);
  color: var(--primary-white);
  height: 100vh;
`;

const StyledInner = styled.div`
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;

  .box1 {
    opacity: 0;
  }
`;

export const Hero = () => {
  const revealsRef = useRef([]);
  revealsRef.current = [];

  useLayoutEffect(() => {
    revealsRef?.current.map((el, index) => {
      const ctx = gsap.context(() => {
        gsap.to('.box1', {
          scrollTrigger: {
            id: `section-${index}`,
            trigger: el,
            end: 'bottom top',
            scrub: true,
            start: 'top top',
            markers: true,
          },
          opacity: 1,
          y: -10,
        });
      }, el);

      return () => {
        ctx.revert();
      };
    });
  }, []);

  const addToRefs = (el) => {
    if (el && !revealsRef.current.includes(el)) {
      revealsRef.current.push(el);
    }
  };

  return (
    <StyledHero>
      {slides.map((slide) => {
        return (
          <StyledSlide key={slide.id} ref={addToRefs}>
            <StyledInner>
              <h1 className="box1">{slide.message}</h1>
            </StyledInner>
          </StyledSlide>
        );
      })}
    </StyledHero>
  );
};

All the text fades in at the same time and I can't quite see what's going wrong. Any advice gratefully received!