Flip animation jumping from one-parent to another-parent while scrollTrigger

[ashura]

So I'm tryna copying this one in the animation... which is when I'm scrolling i'm tryna jump the one element of the parent to another-parent in react but it doesn't seem well applied.

 

what's wrong I think in mine is that it doesn't go back to its original parent when scrolling back, however when I'm scrolling it just weird making a position instead of transition to the new parent like the same in the link. 

Here is the main code you will find I think the issue.
 

  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: ".showcases",
        endTrigger: showMovieRef.current,
        scrub: true,
        animation: flip
      });
    });
  };

  useEffect(() => {
    if (animState2) {
      anim();
    }
  }, [animState2]);

And here is the link demo and I don't understand why it isn't working as well the same in demo in codepen. 
https://codesandbox.io/s/loving-phoebe-64zhkr?file=/src/Anim2.jsx:3152-3728

See the Pen bGxOjeP by GreenSock (@GreenSock) on CodePen

[daniel.mt]

The scroller end doesn't reach the end. Try to either reduce the top of the endTrigger from 10% to 0 or lower or make the viewport bigger for it to reach and see if this works for you

 

I recommend you to add markers: true. It's easier for you to debug it: 

 

[ashura]

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. 

[Rodrigo]

Hi,

 

We created this simple example for Flip animations while re-parenting in React:

 

https://stackblitz.com/edit/vitejs-vite-bpwfpk?file=src/App.jsx

 

Happy Tweening!