Jump to content
Search Community

Pavel Laptev

Members

  • Posts

    11

  • Joined

  • Last visited

 Content Type 

Posts posted by Pavel Laptev

    Can't override the `touchAction` for Draggable in React

    in GSAP

    Posted

    On 8/4/2022 at 6:37 AM, GreenSock said:

    Did you try just doing your .set() AFTER you create the Draggable? It looks like you did it BEFORE in your demo. 

     

    Also, if you don't want to allow native touch scrolling, setting allowNativeTouchScrolling: false is an option as well (instead of allowEventDefault). 

    Thank you!

    React + useState + forEach. Restarts the animation on `state` update

    in GSAP

    Posted

    3 minutes ago, SteveS said:

    Again, relying on state for this, at least in the way you have constructed it, is not straightforward. Instead, control the timeline. Also, I'm pretty sure you are never supposed to declare components inside each other, such as you have with <FlowerCircles />.

    Here is a CSB that works using the method I outlined:

    https://codesandbox.io/s/dank-tree-9mq340?file=/src/App.tsx
     

    Note: I'm not properly cleaning up the tweens or the timeline. To do so add them to an array and loop through the array in the cleanup to kill them.

    Thank you, @SteveS wouldn't figure it out without you

    • Like 2

    React + useState + forEach. Restarts the animation on `state` update

    in GSAP

    Posted

    @SteveS seems like I'm doing something wrong here https://codesandbox.io/s/mutable-waterfall-5y4l8m?file=/src/App.tsx:1706-1724

     

    Also found this example, but it doesn't work with an array of timelines 🤔

     

      

    import "./styles.css";
import React from "react";

import gsap from "gsap";

const App = () => {
  const flowerCirclesRef = React.useRef<any>([]);
  const flowerTimelinesRef = React.useRef<any>(
    [...Array(10)].map(() => gsap.timeline({ paused: true }))
  );
  const [step, setStep] = React.useState(0);

  const FlowerCircles = () => {
    return (
      <>
        {Array.from(Array(6).keys()).map((i) => {
          return (
            <div
              key={i}
              className="flower"
              ref={(el) => (flowerCirclesRef.current[i] = el)}
            />
          );
        })}
      </>
    );
  };

  React.useEffect(() => {
    if (flowerCirclesRef.current.length === 0) return;

    flowerCirclesRef.current.forEach((el: any, i: any) => {
      const timeline = flowerTimelinesRef.current[i];
      timeline
        .from(el, {
          transformOrigin: "left center",
          opacity: 0,
          scale: 0.1,
          borderWidth: 3,
          left: "50px"
        })
        .to(el, {
          transformOrigin: "left center",
          rotate: 180 * (i / 3),
          scale: 1,
          opacity: 1,
          borderWidth: 1,
          duration: 1.3,
          delay: i * 0.1,
          ease: "elastic.out(0.5,0.9)",
          onComplete: () => {
            flowerTimelinesRef.current[i].pause();
          }
        })
        .to(el, {
          rotate: 60 * (i / 3),
          x: 20 * i
        });
    });

    return () => {
      flowerTimelinesRef.current.forEach((el: any) => {
        el.kill();
      });
    };
  }, []);

  React.useEffect(() => {
    if (step === 1) {
      console.log("flowerTimelinesRef.current", flowerTimelinesRef.current);
      flowerTimelinesRef.current.forEach((timeline: any) => timeline.play());
    }
  }, [step]);

  return (
    <section className={"wrapper"}>
      <button onClick={() => setStep(step + 1)}>Next step</button>
      <div className="flowerwrap">
        <FlowerCircles />
      </div>
    </section>
  );
};

export default App;

     

    React + useState + forEach. Restarts the animation on `state` update

    in GSAP

    Posted

    Hi, gsappers! I have a question regarding `useState` and `forEach` method.

     

    The issue: I want to switch the animation to the next step depending on the `step` state.

    But if I change the state, the animation resets, instead of going seamlessly from the step one to step two and so on.

    What could be the reason behind it? Should I create the timeline as a `ref` for each element I want to animate? 

     

    Here is the demo — https://codesandbox.io/s/optimistic-sammet-6k76cn?file=/src/App.tsx

     

    Code: 

    import "./styles.css";
import React from "react";

import gsap from "gsap";

const App = () => {
  const flowerCirclesRef = React.useRef<any>([]);
  const [step, setStep] = React.useState(0);

  const FlowerCircles = () => {
    return (
      <>
        {Array.from(Array(6).keys()).map((i) => {
          return (
            <div
              key={i}
              className="flower"
              ref={(el) => (flowerCirclesRef.current[i] = el)}
            />
          );
        })}
      </>
    );
  };

  React.useEffect(() => {
    flowerCirclesRef.current.forEach((el: any, i: number) => {
      if (step === 1) {
        gsap.fromTo(
          el,
          {
            transformOrigin: "left center",
            opacity: 0,
            scale: 0.1,
            borderWidth: 3,
            left: "50px"
          },
          {
            transformOrigin: "left center",
            rotate: 180 * (i / 3),
            scale: 1,
            opacity: 1,
            borderWidth: 1,
            duration: 1.3,
            delay: i * 0.1,
            ease: "elastic.out(0.5,0.9)"
          }
        );
      }

      if (step === 2) {
        gsap.to(el, {
          rotate: 100 * (i / 3),
          x: i * 100,
          scale: 2,
          opacity: 1,
          borderWidth: 1,
          duration: 1.3,
          delay: i * 0.1,
          ease: "elastic.out(0.5,0.9)"
        });
      }
    });
  }, [step]);

  return (
    <section className={"wrapper"}>
      <button onClick={() => setStep(step + 1)}>Next step</button>
      <div className="flowerwrap">
        <FlowerCircles />
      </div>
    </section>
  );
};

export default App;

     

     

    Thank you!

×
×
  • Create New...