ashura Posted June 16, 2023 Share Posted June 16, 2023 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 Link to comment Share on other sites More sharing options...
daniel.mt Posted June 16, 2023 Share Posted June 16, 2023 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: 1 Link to comment Share on other sites More sharing options...
Solution ashura Posted June 16, 2023 Author Solution Share Posted June 16, 2023 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. Link to comment Share on other sites More sharing options...
Rodrigo Posted June 28, 2023 Share Posted June 28, 2023 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! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now