Hey thanks for the answer I am a newbie using gsap and I am trying to get more familiar using it with react ecosystem. I started reading docs and I try to implement different solutions as well as watching other tutorials.
I tried to use that code in such a code block in React:
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { useRef, useEffect } from 'react';
import './Animation.css';
gsap.registerPlugin(ScrollTrigger);
gsap.set('.gridBlock', {
backgroundImage: (i) =>
`url(https://picsum.photos/${500}/${500}?random=${i})`,
});
const Animation = () => {
const imageRef = useRef(null);
useEffect(() => {
const el = imageRef.current;
gsap
.timeline({
scrollTrigger: {
trigger: document.querySelector('.grid-container'),
start: 'top top',
end: () => 400 * 4,
scrub: true,
pin: document.querySelector('.grid'),
anticipatePin: 1,
},
})
.set('.gridBlock:not(.centerBlock)', { autoAlpha: 0 })
.to(
'.gridBlock:not(.centerBlock)',
{ duration: 0.1, autoAlpha: 1 },
0.001
)
.from('.gridLayer', {
scale: 3.3333,
ease: 'none',
});
}, []);
return (
<div className="grid-container">
<div className="grid">
<div className="gridLayer">
<div className="gridBlock"></div>
</div>
<div className="gridLayer">
<div className="gridBlock"></div>
</div>
<div className="gridLayer">
<div className="gridBlock"></div>
</div>
<div className="gridLayer centerPiece">
<div className="gridBlock centerBlock"></div>
</div>
<div className="gridLayer">
<div className="gridBlock"></div>
</div>
<div className="gridLayer">
<div className="gridBlock"></div>
</div>
<div className="gridLayer">
<div className="gridBlock"></div>
</div>
<div className="gridLayer">
<div className="gridBlock"></div>
</div>
<div className="gridLayer">
<div className="gridBlock"></div>
</div>
</div>
</div>
);
};
export default Animation;
yet for now I couldn't figure out why it's not working properly. I will appreciate every single help
