hantastic

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

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

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!