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>
);
}