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!