react

[Sulochan]

Was working with svg and GSAP and to get elastic effect, was using GSAP.to but the motive isnt achieved. Let me know where i am going wrong.

import { useEffect, useRef, useState } from 'react';
import './showHow.css';
import { motion } from 'framer-motion';
import logo from '../assets/oferta blue.png';
import Oferta from './Oferta';
import Reach from './Reach';
import gsap from 'gsap';
import { useGSAP } from '@gsap/react';

const ShowHow = () => {
  const path = useRef(null);
  const svg = useRef(null);
  const [mousePos, setMousePos] = useState({
    x: 0,
    y: 0,
  });

  useEffect(() => {
    // @ts-expect-error Image width and height may not exist

    const mouseMove = (e) => {
      setMousePos({
        x: e.clientX,
        y: e.clientY,
      });
      const posx = e.clientX / window.innerWidth;
      const posy = e.clientY / window.innerHeight;
      // @ts-expect-error Image width and height may not exist

      path.current.setAttribute(
        'd',
        `M0,50 Q${posx * 600},${posy * 100} 500,50`
      );
    };
    window.addEventListener('mousemove', mouseMove);

    return () => {
      window.removeEventListener('mousemove', mouseMove);
    };
  }, []);

  useGSAP(() => {
    const outMouse = () => {
      gsap.to(path, {
        ease: Elastic.easeOut.config(1, 0.3),
        attr: {
          d: 'M0,50 Q300,25 600,50',
        },
      });
    };
    // @ts-expect-error Image width and height may not exist

    svg.current.addEventListener('mouseleave', outMouse);
  });

  const variants = {
    default: {
      x: mousePos.x - 8,
      y: mousePos.y - 8,
    },
  };
  return (
    <div>
      <motion.div className='cursor' variants={variants} animate='default' />
      <div className='logo'>
        <img src={logo} alt='logo' />
      </div>
      <div className='black-container'>
        <div className='blue-text py-8'>Let us show you how</div>
        <div
          className='roboto text-7xl text-white font-light'
          style={{ lineHeight: '1.2', marginRight: '240px' }}
        >
          At Oferta24, we believe no business is the same; each with unique
          challenges, objectives and market conditions. That is why we have
          created a marketing platform that provide flexible, customizable and
          measureable marketing strategies to compliment the unique needs of any
          business…including yours.
        </div>
        <div className='button'>Get your FREE Campaign</div>
        <div>
          <svg
            ref={svg}
            viewBox='0 0 600 200'
            preserveAspectRatio='xMinyMid meet'
          >
            <path d='M0,50 Q300,25 600,50' ref={path} />
          </svg>
        </div>
        <div style={{ height: '100vh' }}></div>
        <div style={{ color: 'white' }}>now services section</div>
        <Oferta />
        <Reach />
      </div>
    </div>
  );
};

export default ShowHow;

 

[Toso]

hi @Sulochan 

 

 

[Rodrigo]

Hi,

 

Besides echoing @Toso's request for a minimal demo which you can create by forking one of the starter templates we have in our Stackblitz collection:

https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters

 

Maybe this demo can provide a good starting point:

See the Pen Rwvdowy by GreenSock (@GreenSock) on CodePen

 

Finally is not really a good idea in terms of performance to update the state of a React component on every mouse move event, since that will trigger a re-render every time the state is updated. If you need something to persist in these type of scenarios better use refs:

https://react.dev/reference/react/useRef

 

Hopefully this helps.

Happy Tweening!