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