Jump to content
Search Community

ashura

Members

  • Posts

    38

  • Joined

  • Last visited

 Content Type 

Posts posted by ashura

    Swapping Flip bug element item between divs react.js

    in GSAP

    Posted

    8 hours ago, ashura said:

    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-vcttzd?file=%2Fsrc%2FApp.js%3A9%2C20
     

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


     

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

     

    Swapping Flip bug element item between divs react.js

    in GSAP

    Posted

    6 hours ago, GSAP Helper said:

    Hm, when I try your link, it says: 

     

    Can you please fix that? Or here are some React Starter Templates (please read this article!)

     

    Also, it looks like you're not doing proper cleanup in React. Have you seen the useGSAP() hook? I'd strongly recommend that instead of useEffect(). It also seems odd to me that you're not capturing the flip state anywhere in your code excerpt. Typically a Flip animation follows 3 steps: 

    1. Capture the current state with Flip.getState()
    2. Make your changes
    3. Flip.from(...)

    I wonder if you're using a stale state object or something. Very difficult to tell without a minimal demo, but once you fix that link I'm sure it'll be more clear. 

    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... 
     

     

    Swapping Flip bug element item between divs react.js

    in GSAP

    Posted

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


     

    Reversing the target timeline

    in GSAP

    Posted

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

            })

     

    Reversing the target timeline

    in GSAP

    Posted

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

     

    Flipping image with scrollTrigger three or multiple times in parent sections...

    in GSAP

    Posted

    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

    Flipping image with scrollTrigger three or multiple times in parent sections...

    in GSAP

    Posted

    7 hours ago, Rodrigo said:
    • Use state in and conditional rendering in order to reparent the element, not DOM manipulation (honestly some React folks could have a stroke or condemn you to the fire pits if they see all those appendChild() calls there :D).

    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... 

     

    Flipping image with scrollTrigger three or multiple times in parent sections...

    in GSAP

    Posted

    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
      });
    });
  }, []);

     

    What's difference of animation and animate in ScrollTrigger.create() and scrollTrigger in timeline ?

    in GSAP

    Posted

    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. 

    How do I use the ScrollTrigger scrub of text animation in observer?

    in GSAP

    Posted

    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. 

    How do I use the ScrollTrigger scrub of text animation in observer?

    in GSAP

    Posted

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

     

    GSAP x NextJS x Locomotive Scroll

    in GSAP

    Posted

    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. 

     

    • Like 2

    How do I simply stop the user scrolldown velocity to the certain element in ScrollTrigger observer?

    in GSAP

    Posted

    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
     

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

    in GSAP

    Posted

    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. 

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

    in GSAP

    Posted

    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

1
2
Page 1 of 2  
×
×
  • Create New...