diff --git a/src/components/Hand.js b/src/components/Hand.js new file mode 100644 index 0000000..83e08d5 --- /dev/null +++ b/src/components/Hand.js @@ -0,0 +1,25 @@ +function HoldingPlant() { + return ( + const wrapper = useRef(null); + + useEffect(() => { + const [elements] = wrapper.current.children; + + const plant = elements.getElementById("plant"); + const hand = elements.getElementById("hand"); + + gsap.set([plant, hand], { autoAlpha: 0 }); + + const tl = gsap.timeline({ defaults: { ease: "power3.inOut" } }); + + tl.fromTo(hand, { x: "-=300" }, { duration: 1, x: "+=300", autoAlpha: 1 }); + tl.fromTo(plant, { y: "+=10" }, { duration: 1, y: "-=10", autoAlpha: 1 }); + }); + + return ( +