Pavel Laptev

Hi! I'm trying to make an animation with the ScrollTrigger with React. Each card component has the `gsap` `fromTo` function, and I'm passing the trigger element via props. But it creates two scrolls. I'm missing something, but can't understand what. Thank you in advance! Demo is here https://codesandbox.io/s/brave-ishizaka-s6hysi?file=/src/Card.tsx

Thank you!

I figured that if you disable `allowEventDefault: true` this fix the issue. But I hope it wouldn't affect the behaviour for interactive elements inside.

up

Hi! I have the similar problem as in this thread — draggable doesn't work well on androids. In order to fix it I need to override the default draggable `touchAction` which is `manipulation` but I can't do it with react. Looks like it's just ignore my override. What am I doing wrong? Here is the demo — https://codesandbox.io/s/gracious-lumiere-ynov4r?file=/src/App.tsx

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

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

@SteveS Thank you. Very helpful

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!

Wow, that's so cool. Thank you @ZachSaucier

Hi, guys! I'm wondering if there is a way to move an element without the need to hover the cursor on the draggable element? Thank you!