1

I am working on this project that I need the given SVG component to swing about a point in the center like a see-saw. The swinging is continuous, i.e. up and down like a typical see-saw. I am trying to accomplish this using react-spring.

Here is the image of the SVG.

Svg Image

Here is the SVG component that I would like to animate:

Hangingbar.tsx

import React from 'react';
import { animated } from '@react-spring/web';

const Hangingbar = ({ styles }: any) => {
    return (
        <animated.g style={styles}>
            <path d="M423.563 76.1328C339.848 90.5789 256.134 105.025 172.42 119.471C172.336 122.736 172.253 126.001 172.169 129.266C179.288 131.082 186.406 132.898 193.525 134.713C283.271 116.991 373.018 99.268 462.765 81.5454C462.932 78.1966 463.099 74.8477 463.267 71.4989C450.032 73.0435 436.797 74.5882 423.563 76.1328Z" fill="#FF8800"/>
            <path d="M193.497 135.729L171.158 130.032L171.45 118.632L423.448 75.1481L464.316 70.3784L463.716 82.3681L462.957 82.5182L193.497 135.729ZM173.181 128.501L193.553 133.697L461.813 80.7227L462.218 72.6196L423.704 77.1146L173.391 120.31L173.181 128.501Z" fill="#19100D"/>
            <path d="M424.46 68.1691L173.328 118.525C171.555 118.88 171.515 121.4 173.276 121.812L194.423 126.75L462.01 74.1793C464.093 73.7702 463.896 70.7298 461.778 70.5923L424.46 68.1691Z" fill="#FF8800"/>
            <path d="M194.405 127.764L173.05 122.777C171.795 122.484 170.965 121.421 170.985 120.132C171.006 118.843 171.869 117.806 173.133 117.553L424.394 67.1713L424.525 67.1797L461.842 69.6029C463.289 69.6968 464.365 70.7732 464.459 72.2201C464.552 73.667 463.624 74.8728 462.201 75.1523L194.405 127.764ZM424.527 69.1672L173.523 119.497C173.016 119.598 172.97 120.032 172.968 120.163C172.966 120.294 172.999 120.729 173.501 120.846L194.441 125.736L461.819 73.2068C462.475 73.0777 462.49 72.517 462.479 72.3482C462.468 72.1794 462.381 71.6253 461.714 71.582L424.527 69.1672Z" fill="#19100D"/>
            <path d="M329.762 108.622H327.779V99.5948L320.369 85.1897C320.23 84.9192 319.981 84.8582 319.881 84.8443C319.779 84.8308 319.524 84.8227 319.318 85.0457L314.131 90.6478L312.676 89.3006L317.863 83.6986C318.445 83.0698 319.299 82.7623 320.149 82.8797C320.999 82.9959 321.74 83.5204 322.132 84.2827L329.762 99.1146V108.622Z" fill="#19100D"/>
        </animated.g>
    )
}

export default Hangingbar

This is how I am creating the string styles using useSpring, however, I have only managed to make the bar move sideways:

App.tsx (recanted to have only necessary code)

const App = () => {
    const [toggle, setToggle] = useState(false)

    useEffect(() => {
        const timer = setInterval(() => {
            setToggle(prevState => !prevState);
        }, 3000);
    
        return () => {
            clearInterval(timer);
        };
    }, []);

    const hangingBarSpring = useSpring({
        transform: toggle ? `translate3d(0px, 0px, 0px)` : `translate3d(-100px, -20px, 0px)`,
        config: { duration: 3000 },
    })

    return (
        <svg width="661" height="451" viewBox="0 0 661 451" fill="none" xmlns="http://www.w3.org/2000/svg">
            <Hangingbar styles={hangingBarSpring} />
        </svg>
    )
    }
    export default App;

The challenge I am facing is what to use to make the bar swing about the middle point. I tried searching for similar examples online but I cannot get any.

japheth
  • 373
  • 1
  • 10
  • 34

1 Answers1

0

I give it a shot and this seems to be working for me!

import React from 'react';
import { useSpring, animated } from 'react-spring';

const SeeSaw = () => {
  const { transform } = useSpring({
    from: {
      transform: 'rotate(25deg)',
    },
    to: {
      transform: 'rotate(-25deg)',
    },
    config: { duration: 3000 },
    loop: { reverse: true }
  });

  return (
    <animated.div
      style={{ transform }}
      className="w-16 border-b-8 border-black"
    />
  );
};

export default SeeSaw;

The key is to use the "rotate" transform and then make it loop with the "reverse" property set to true.

Seenathin
  • 101
  • 2