score:0

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.


Related Query

More Query from same tag