Thanks buddy @daniel.mt but I already got fixed it. It seems its not possible to separate each item and make a scrollTrigger for them so it needs only one parent containing two 100vh to make it possible.
const anim = () => {
flipCtx && flipCtx.revert();
wrapperRef.current.appendChild(midLayerRef.current);
flipCtx = gsap.context(() => {
const state = Flip.getState(midLayerRef.current,{ });
showMovieRef.current.appendChild(midLayerRef.current);
const flip = Flip.from(state, {absolute: true });
ScrollTrigger.create({
trigger: ".banner",
scrub: true,
start: "clamp(+=50% center)",
endTrigger: '.showcases',
end: "clamp(+=200% bottom)",
pin:true,
markers:true,
animation: flip,
});
});
}
useEffect(() => {
if (animState2) {
anim()
}
},[animState2])
return (
<div className='anim2-component'>
<section className="banner">
<div className="wrapper" ref={wrapperRef}>
<div className="layer lf">
<h1>
ANIME
</h1>
</div>
<div className="mid-layer" ref={midLayerRef}>
<img src="./products/OshiB.jpg" alt="" />
</div>
<div className="layer rt">
<h1>
ANIME
</h1>
</div>
</div>
<section className="showcases">
<div className="showMovie" ref={showMovieRef}>
</div>
</section>
</section>
</div>
)
Which is now this is the modification..and its easy more to transition the Flip lol.
