CODEWITHSUNDEEP
reactjsframer-motion
ImpsImperial
ImpsImperial

Reputation: 60

Reverse animation on click using Framer Motion

How can I trigger the repeatType on Click?

<motion.div
  animate={{ rotate: 180 }}
  transition={{
    repeat: 1,
    repeatType: "reverse",
    duration: 2
  }}
/>

Upvotes: 0

Views: 6066

Answers (1)

ChilTest
ChilTest

Reputation: 511

Here is example

Code:

import * as React from "react";
import { render } from "react-dom";
import { Frame, useCycle } from "framer";

export function MyComponent() {
  const [animate, cycle] = useCycle(
    { scale: 1.5, rotate: 0 },
    { scale: 1.0, rotate: 180 }
  );
  return (
    <Frame
      animate={animate}
      transition={{ duration: 2 }}
      onTap={() => cycle()}
      size={150}
      radius={30}
      background={"#000"}
    />
  );
}

const rootElement = document.getElementById("root");
render(<MyComponent />, rootElement);

Note you have 2 properties for motion objects: animation and transition. Animation - animation of the object, transition - how/when the animation will work. I recommend you strictly separate these 2 props, and all behaviour always describe in transition, keeping the animation only for exactly animation.

Upvotes: 2

Related Questions