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.
Source: stackoverflow.com
Related Query
- Reverse animation on click using Framer Motion
- Framer motion - animation doesn't start after state change using controls
- Animation made using framer motion looks too lagged in reactjs
- How can i make a child animation happen every time the parent animation is beginning using framer motion & react
- Framer Motion exit animation not firing on accordion with react-router-dom
- React: Framer Motion / onClick activate only the animation
- Snapping to position onDragEnd with motionValues using Framer Motion and React
- How to animate on each state change using framer motion
- How to use animation multiple times in framer motion
- Exit animation for children items not working in Framer Motion
- Framer animation using react intersection observer. Need multiple animations but get only one
- React & Framer Motion - Removing from list causes initial animation to play when map returns a component
- How can I do a different animation between the pages with Framer Motion and Next.js?
- How can I fix my Framer Motion animation in React?
- Animate background using Framer Motion
- How to achieve full-page animation on scroll using Framer Motion, Complex layouts changes?
- Animation when I change a locale - framer motion
- CSS module being removed on path change before Framer Motion exit animation completes
- Framer Motion wavy text animation
- How to make an Scale from the center while hovering using framer motion
- Draw a dashed path using Framer Motion in React
- Next.js + Framer Motion scroll progress animation
- why isnt my framer motion animation not triggering on unmount?
- Animating svg text using framer motion in React
- Why does using React Context with Framer Motion not work?
- Small animation around on click area using React (ideally with CSS only)
- React Framer Motion whileInView not working while using X position
- I cant use framer motion when using <navigate/> react router dom v6 to auth my login page
- Framer Motion animation repeats on state change
- How to use framer motion animation with swiper.js (React)?
More Query from same tag
- ReactJS: Unable to set "Active" class on ReactProSidebar Menu Item
- Why scale.ticks(number) from d3 does not work as expect?
- School project with this error: Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null
- How to get rid of border and add background color to MUI TextField variant outlined
- Error: Request failed with status code 403 - Problem with Axios, possible exchange for fetch
- Unable to trigger onClick event
- React onClick changes Paginated data one step Behind
- How to import a script for my project ? ReactJS
- HTTP requests between docker containers
- Javascript - How to loop through an array over and over again in React
- Unit Testing navigator.permissions.query({ name: 'geolocation' }) using Jest (React)
- Implement React-pagination with Rest Api
- React: Spread the return of a function in one line
- Load CSS module in ReactJS + Typescript and react rewired
- An example of using the 'react-leaflet' new useLeaflet() hook?
- React JS, error in Redux state updation, cannot read property Symbol(Symbol.iterator)
- React localStorage issue
- How to filter cars by key-value
- Can I Set Initial State with Props in React + Redux?
- Clearing a text field value using a final-form calculator
- Redux Form action undefined
- Are there downsides to importing both a namespace and a child module? E.g. `import React, { Component } from ...`
- Handling different types of a component from other components
- semantic ui react mobile friendly components
- How to use React.lazy in Gatsby
- How to connect to a sqlite db from a React app?
- I'm getting an "Uncaught TypeError: Cannot read properties of undefined (reading 'push')" with react-router-dom v6
- relay fragment spread not working
- OnKeyPress does not Fire
- relayjs and graphql error: Error: "Node" expects field "id"