[Zoom out then scroll effect?]

2 hours ago, Cassie said:

Hi there - have you seen our React guide?
 

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  

[Zoom out then scroll effect?]

I am trying to implement the same effect in React but I am very confused. How can I implement the same effect in useEffect?