ashura

nevermind fixed it already 😅... I'm overthinking I should have just re-call the flip state... sorry it was a mistake...but the problem is the code a bit messy? is there a way to revised this code cleaner and no memory junks? useLayoutEffect(() => { animState.current = Flip.getState( [textState.current] ) },[]) useLayoutEffect(() => { // if (up) { gsapState.current = Flip.from(animState.current,{ scale:true, absolute:true, zIndex:2, duration:2, ease: "power3.inOut", targets:[ textState.current ], onStart:() => { setisAnimating(true) }, onComplete:() => { setisAnimating(false) } }) // } },[up]) const handleSetUp = () => { if ( !isAnimating ) { animState.current = Flip.getState( [textState.current] ) setUp(!up) setAlternate(!alternate) } }

found it... it is somehow related like this like you click and click it but mine is switching position that's simple but this code is a bit different of mine...so you can check it now in sandbox it is fix now the link...

thanks sir @GSAP Helper please see it again thanks for the help... haven't tried the useGsap() seems new to me but thanks will review it. https://codesandbox.io/p/sandbox/flip1-vcttzd?file=%2Fsrc%2FApp.js%3A30%2C21

I'm trying to switch both sides when I click the start and then start the flips but the problem is that sometimes it is just switching on the other side without animation and no proper switch..it is just randomly get back to first position or opposite side without animation of flip... can anyone help me this one? I can't find the bug... Thank you for any help. Here is the codesandbox.io https://codesandbox.io/p/sandbox/flip1-forked-2wt7y5?file=%2Fsrc%2FApp.js%3A13%2C34 I don't know if it's here or wrong call in flip-id or what.. I missed 😅 useEffect(() => { if (up) { if (!alternate) { gsapState.current = Flip.from(animState.current, { scale: true, absolute: true, zIndex: 2, duration: 2, ease: "power3.inOut", targets: [textState.current], onStart: () => { setisAnimating(true); }, onComplete: () => { setisAnimating(false); setAlternate(!alternate); }, }); } else { gsapState.current = Flip.to(animState.current, { scale: true, absolute: true, zIndex: 2, duration: 2, ease: "power3.inOut", targets: [textState.current], onStart: () => { setisAnimating(true); }, onComplete: () => { setisAnimating(false); setAlternate(!alternate); }, }); } } }, [up]);

that problem I already solved it already, but the problem is that I want to use reversing without recalling the same logic that applies in the "tl"...anyways if anyone can give me a better idea than using this one.. I would be glad thank you. like for example calling the '--opening-dash' again or something like that in their structure rather just reversing with specific targets of timeline that would be easy for me. const tl = gsap.timeline({ defaults: { duration:2, ease:'sin.inOut' }, paused:false }) tl.to('.container-opening',{ '--opening-dash':'100%', ease:"expo.inOut" }) tl.to('.auth-lyr .line',{ "--line-width":'50px', ease:'expo.inOut' },1) tl.to('.auth-lyr h4',{ opacity:1, filter:'blur(0px)' },1) const toAllText = document.querySelectorAll('.original .d-word'); console.log(toAllText) toAllText.forEach((letter, index) => { const randomAnimation = animations[Math.floor(Math.random() * animations.length)]; gsap.set(letter,{ transform:`${randomAnimation}`, filter:'blur(5px)', opacity:0 }) console.log(letter) tl.to(letter,{ transform:`translateX(0%) translateY(0%)`, filter:'blur(0px)', duration: Math.floor(Math.random() * 3) + 1.5, // Range between 3 to 5 seconds ease:'expo.inOut', opacity:1, },2); }); tlRef.current = tl.to('h1.overlaying-text',{ opacity:0.865, duration:5, ease:'sin.inOut', }) tl.eventCallback("onComplete", () => { const reverseTL = gsap.timeline({ defaults: { duration:2, ease:'sin.inOut' }, paused:false, onComplete:() => { setUp(true) } }) reverseTL.to('.container-opening',{ '--opening-dash':'0%', ease:"expo.inOut" }) reverseTL.to('h1.overlaying-text',{ opacity:0, duration:5, ease:'sin.inOut' }) })

Hello, my problem here is that why nestedTL can't get reverse even if I already give a reverse in the "tl" is there something wrong trying to conflict each other? Can anyone tell me notice how is it done here? I'm using a react. I tried different things to reversing but nothing really working out. I'm trying to reverse a specific timeline while adding it in the main timeline "tl". const nestedTL = gsap.timeline({ defaults: { duration: 2, ease: 'sin.inOut' }, paused: false }); const tl = gsap.timeline({ defaults: { duration: 2, ease: 'sin.inOut' }, paused: false, onComplete:() => reverseNestedTL() }); nestedTL.to('.container-opening', { '--opening-dash': '100%', ease: 'expo.inOut' }); nestedTL.to('.auth-lyr .line', { '--line-width': '50px', ease: 'expo.inOut' }, 1); tl.add(nestedTL); // Animations in tl (not included in reverse) tl.to('.auth-lyr h4', { opacity: 1, filter: 'blur(0px)' }, 1); const toAllText = document.querySelectorAll('.original .d-word'); toAllText.forEach((letter, index) => { const randomAnimation = animations[Math.floor(Math.random() * animations.length)]; gsap.set(letter, { transform: `${randomAnimation}`, filter: 'blur(5px)', opacity: 0 }); // Animations in tl (not included in reverse) tl.to(letter, { transform: 'translateX(0%) translateY(0%)', filter: 'blur(0px)', duration: Math.floor(Math.random() * 3) + 1.5, ease: 'expo.inOut', opacity: 1, }, 2); }); const newTL = gsap.timeline() // Add h1.overlaying-text to nestedTL for reversal newTL.to('h1.overlaying-text', { opacity: 0.865, duration: 5, ease: 'sin.inOut', }); nestedTL.add(newTL) tl.add(newTL) function reverseNestedTL() { nestedTL.timeScale(2).reverse(); } // // Assign the onComplete callback as a function reference without executing it immediately // tl.eventCallback("onComplete", () => { // nestedTL.reverse(); // }); // Add h1.overlaying-text to nestedTL for reversal // tl.add(nestedTL.nextLabel(2));

Thanks I manage to do it with ScrollTrigger @Rodrigo but I'm still not satisfied with the Flip not relying in Scrolltrigger scrub, although it activates the animation of Flip but I can't do it with the scrub of scrolltrigger which is fine for me now. I'll ask for help if I can't do it...but I think its fine now. Thanks for the help master! https://codesandbox.io/s/laughing-yalow-xfrzmg

Having the same trouble as you @norkuy did you find it out? its kinda annoying there is no possibility I can reparent the child with the GSAP Flip because of ReactDOM.

No, it supposed to Flip..I just use a simple Flip by using scale and opacity just to make it work but it doesn't apply the Flip animation @Rodrigo jumping the item to another one parent. This is not what I meant my bad. It is just a demo of how I think the flip will happen but I just used a scale and opacity.

Ok I follow the procedure you give to me sir @Rodrigo, but the problem is that no animation of Flip happening here. This is the functionality. What I mean no Flip is that there is no jumping the '.p-bg' happening from to another. Where part I am wrong? It is working though but the jumping one to another is not. const p1 = useRef(null); const p2 = useRef(null); const p3 = useRef(null); const itemsRef = useRef([]); const bg = useRef(null); const [openState, setOpenState] = useState(false); const ctx = useRef(gsap.context(() => {})); const [currentParent, setCurrentParent] = useState(0); const flipState = useRef(); // useEffect(() => { // ctx.current.add(() => { // }) // return () => { // ctx.current.revert() // } // }, []); const handleNextItem = () => { if (currentParent == 2) { setCurrentParent(0); flipState.current = Flip.getState(bg.current, { props: "transform, top, left" }); } else { setCurrentParent(currentParent + 1); flipState.current = Flip.getState(bg.current, { props: "transform, top, left" }); } }; const ChildElement = () => ( <div className="p-bg" ref={bg}> <img src="./products/OshiB.jpg" alt="" /> </div> ); useLayoutEffect(() => { if (flipState.current) { Flip.from(flipState.current, { targets: ".p-bg", absolute: true, scale: true, ease: "none", duration: 1.5, onEnter: (elements) => { return gsap.fromTo( elements, { opacity: 0, scale: 0 }, { opacity: 1, scale: 1, delay: 0.2, duration: 0.3 } ); }, onLeave: (elements) => { return gsap.to(elements, { opacity: 0, scale: 0 }); } }); } }, [currentParent]); And This is the Display. <div className="container"> <div className="active-button" onClick={(e) => handleNextItem()}> Next Item </div> <div className="p p-1 active" ref={(e) => itemsRef.current.push(e)}> {currentParent == 0 && ChildElement()} {/* {ChildElement()} */} <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> </div> <div className="p rev p-2 p-right" ref={(e) => itemsRef.current.push(e)}> {currentParent == 1 && ChildElement()} {/* {ChildElement()} */} <p>My Life Has Been Bullish</p> </div> <div className="p rev p-2 p-right" ref={(e) => itemsRef.current.push(e)}> {currentParent == 2 && ChildElement()} {/* {ChildElement()} */} <p> My Life Has Been Bearish </p> </div> </div> The codes are modified in the same link I give but it seems no Flip animating happening as you mention it. What did I miss? https://codesandbox.io/s/laughing-yalow-xfrzmg?file=/src/FlipScrolls.jsx

Hi, thanks for the response Rodrigo, but I'm not sure how to do that? I'm sorry I'm a bit lost but I don't understand it well. When you mean reparent with conditional how does that mean? I'm sorry but I can't imagine the code of how can I reparent it without using DOM manipulation... Please can I get a sample code or anything...

Hi, I'm a bit troubling how can I Flip the image to another parent element. Like let say I have three parents "section1" , "section2", "section3". Now once I am scrolling down with the scrollTrigger pin main parent which is their container. I want the image from section1 bounce each to section2 to section 3. As you see this codes only relies on one item...but I can't possibly make it work with transfering with another parent. Although it is easy with using click buttons but I wanna do it in just relying with scrollTrigger. Anyway here is the link... https://codesandbox.io/s/laughing-yalow-xfrzmg?file=/src/FlipScrolls.jsx And this are the main functionality of codes... const p1 = useRef(null); const p2 = useRef(null); const p3 = useRef(null); const bg = useRef(null); let flipCtx2; const ctx = useRef(gsap.context(() => {})); useEffect(() => { ctx.current.add(() => { flipCtx2 && flipCtx2.revert(); p1.current.appendChild(bg.current); // p3.current.appendChild(bg.current) const state = Flip.getState(bg.current); p2.current.appendChild(bg.current); let flip = Flip.from(state, { scale: true, absolute: true }); // p3.current.appendChild(bg.current) ScrollTrigger.create({ trigger: ".container", endTrigger: p3.current, start: "clamp(+=10 center)", scrub: true, pin: true, end: "+=300%", animation: flip }); }); }, []);

So I'm not really having a trouble but I have a case here wherein the Flip only works in ScrollTrigger.create() attribute of "animation" works for lip but in gsap.timeline({ scrollTrigger: { animate:flip, } ) ... something like that...and this is sample in ScrollTrigger.create() I am talking about. 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(+=40% center)", endTrigger: '.showInside', // end: "clamp(+=100% 100%)", end: () => { return "clamp(+=150% 100%)" }, pin:true, animation: flip, onEnterBack:() => { console.log('leave') }, onLeaveBack:() => { console.log('enter') }, onLeave: ({progress, direction, isActive}) => { showText.play() } }); I'm not asking for anything issues..just asking what makes the different of animate and animation in different ScrollTrigger style thanks in advance.

Thanks for the help @akapowl because I find fascinating the observer. but how did you get this kind of code? I mean how those process of logic thinking derived from you? y: (i,t) => -(t.scrollHeight - window.innerHeight) , or maybe this one too... history.scrollRestoration = "manual" I never know that y could return as function(or attributes as well) and also I don't know about history.scrollRestoration = manual does do.

What do I mean by the title is something done like this... but this is different because it doesn't have a scrollbar because it relies in scrollObserver...so I don't understand how can I make work the scrollTrigger alongside inside the scrollObserver. https://codesandbox.io/s/nervous-resonance-xpjvdf?file=/src/OshiNoko.jsx You can check in my code inside...which what I am trying to do is that I'm trying to spread the scale:2 in the text that is closing in the middle so it looks cool...and then once it pass by the middle it will slowly scale:1 or lower the scale...The scale should be dependent if it's closing in the middle of the item...but it doesn't plus it calls many times the markers which kinda sucks and also I don't know why when I'm trying to onUp or onDown it seems the text a bit laggy when transition? what I am missing here? This is the codes. const gotoSection = (index, isScrollingDown) => { let target = isScrollingDown ? swipePanels[currentIndex] : swipePanels[index]; let currentYPercent = gsap.getProperty(".list-of-items", "yPercent"); gsap.to(target, { scale: isScrollingDown ? 2 : 1, // duration:1.25, ease: "power2.inOut", scrollTrigger: { trigger: target, scrub: 1, start: "top center", end: "bottom center", markers: true } }); gsap.to(".list-of-items", { yPercent: limitYPercent(currentYPercent, isScrollingDown ? +1 : -1), duration: 0, // overwrite:true, ease: "none" }); currentIndex = index; }; // ScrollTrigger.create({ // trigger:'.wrapper', // scrub:true, // start: "top center", // end: "bottom center", // markers:true, // onEnter:() => { // let target = swipePanels[currentIndex]; // gsap.to(target,{ // scale:2, // }) // }, // onLeave:() => { // let target = swipePanels[currentIndex]; // gsap.to(target,{ // scale:1, // }) // } // }) instanceObserver = ScrollTrigger.observe({ target: ".wrapper", wheelSpeed: -1, onUp: () => { gotoSection(currentIndex + 1, true); }, onDown: () => { gotoSection(currentIndex - 1, false); }, tolerance: 10, preventDefault: true, allowClicks: true });

Hi if you are using a NextJS @adelcourte you can't call / import the ScrollTrigger outside of the component because nextjs is static, so what you would want to do is something like this which is improvised of your code. import('locomotive-scroll').then((locomotiveModule) => { import("ScrollTrigger/all").then(({ScrollTrigger}) => { gsap.registerPlugin(ScrollTrigger) }) }) It is also applied in other gsap plugin so becareful when you using static html.

Oh no actually I'm still not set @GreenSock what if the user's really scroll fast? I tried it very very fast and it kinda jump to another section. Try it sir @GreenSock

Yes I am sir @GreenSock. Just got having a hard-time how to deal with complex animation in scrollobserver and scrolltrigger

Nevermind my mistake it should be has end: "+=100%" in the scrollTrigger lol...I'm so dumb. I was just following the tutorial of the gsap and its bad to use end +=1; hahaha

https://codesandbox.io/s/reverent-darkness-k9dwrs?file=/src/Anim3.jsx:3093-3848 I am trying to prevent the scroll from scrolling down when the scrollTrigger hits to the element, but if the velocity or the speed of wheel is high I can't do anything about it. Is there a way to prevent it? I'm tryna do a observer with scrollTrigger at the same time though... But this is the main issue though. intentObserver = ScrollTrigger.observe({ type: "wheel,touch,pointer", // target: ".wrapper", onDown: () => !animating && gotoSection(currentIndex + 1, 1), onUp: () => !animating && gotoSection(currentIndex - 1, -1), tolerance: 10, preventDefault: true, onPress: (self) => { // on touch devices like iOS, if we want to prevent scrolling, we must call preventDefault() on the touchstart (Observer doesn't do that because that would also prevent side-scrolling which is undesirable in most cases) ScrollTrigger.isTouch && self.event.preventDefault(); } }); intentObserver.disable(); ScrollTrigger.create({ trigger: wrapperRef.current, pin: true, scrub: true, start: "top top", end: "+=10", markers: true, onEnter: () => { intentObserver.enable(); gotoSection(currentIndex + 1, 1); }, onEnterBack: () => { intentObserver.enable(); gotoSection(currentIndex - 1, -1); } }); Although in my code I add a extra-height just for the user to slow-down the scrolling but unfortunately it can't because the user wheelspeed relies on it. So the animation works though but you can't see it in its section because it already overlap the scrollTrigger in wrapper. <div className="anim3-component"> <div className="extra-height"></div> <div className="wrapper" ref={wrapperRef}> <svg width="0" height="0" fill="none" xmlns="http://www.w3.org/2000/svg" > <defs> <clipPath id="clip-path-1" clipPathUnits="objectBoundingBox"> <path ref={pathRef} d="M0.01 0L0.99 0.01V0.99L0.01 1V0Z" fill="#D9D9D9" /> </clipPath> </defs> </svg> <img src="https://i.pinimg.com/736x/34/5c/21/345c211390265f6c52e573c40ca45b08.jpg" alt="" /> </div> <div className="next-section"></div> </div> Is there a way I can fix it? Anyway this is the link of codesandbox https://codesandbox.io/s/reverent-darkness-k9dwrs?file=/src/Anim3.jsx:3093-3848

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.

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. https://codepen.io/GreenSock/pen/bGxOjeP 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

thanks @Cassie @Rodrigo but I already got fixed it before you give me the link.. I'm so dumb hahaha I just use gsap.context and it is way more efficient in handling in react hooks.

Thanks I didn't saw your solution. Rodrigo does the ctx.current.revert() always only get called one time or it depends on what are you working different timelines?

can anyone help me through this huhuuh :< it's hard I don't understand why but the logic seems plausible to me but I don't understand why it isn't working as I wanted to.