I’m trying to do an image scaling on scroll with gsap scrolltrigger and flip plugin, it does seem that the everything is working fine except when i add the line to remove the class the flip state does not capture the initial state of the image, I assume because i add and remove the class quickly

here is what I want to achieve ( sorry for the quality)

I did some debugging I’m sure the problem is the initial state of the image, and some times it works randomly and when i refresh the effect goes away again
the closest I think it has something to do with the way I’m adding and removing the type–open class

'use client'
import gsap from "gsap";
import { useRef, useEffect } from "react";
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'
import { Flip } from 'gsap/dist/Flip'
import "./globals.css";

export default function Home() {

  const wrapElementRef = useRef<HTMLHeadingElement | null>(null); 
  const imageRef = useRef<HTMLSpanElement | null>(null); 
  const textRef = useRef<HTMLSpanElement | null>(null);
  
  useEffect(() => {
    gsap.registerPlugin(ScrollTrigger, Flip);

    const wrapElement = wrapElementRef.current;
    const imageElement = imageRef.current;
    const textBlock = textRef.current
      // Temporarily add the 'type--open' class to capture the final state
      wrapElement.classList.add('type--open');

      // Get the flip state
      const flipstate = Flip.getState([imageElement, textBlock], {
        props: 'transform'
      });


      wrapElement.classList.remove('type--open');
      
      // Create the Flip animation timeline
      Flip.to(flipstate, {
        ease: 'sine.inOut',
        simple: true,
        scrollTrigger: {
          trigger: wrapElement,
          start: 'center bottom',
          end: 'center top',
          scrub: true,
        }
      });
    
  }, []);
    
  return (
    <main>
      <div className="box"></div>
      <div className="content content--center">
          <h3 className="meta">Project 2</h3>
          <h2 ref={wrapElementRef} className="type">
              Life is a wild journey;<br />
              embrace the<br />
              <span className="type__expand type__expand--reveal type__expand--center">
                <span className="aright">detours </span>
                <span ref={imageRef} className="type__expand-img" >
                  <span className="type__expand-img-inner" style={{backgroundImage: "url(/img/2.jpg)"}}></span>
                </span>
                <span ref={textRef} className="anim skewed" >and dance</span>
              </span>
              <br />
              under the stars.
          </h2>
        </div>
    </main>
  );
}