<div id="app">
</div>
body {
width: 100vw;
height: 100vh;
overflow: hidden;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(180deg, #f08, #d0e);
}
import React,{useState, StrictMode,useEffect} from 'https://esm.sh/react@18.2.0'
import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import {motion,useAnimationControls} from "https://esm.sh/framer-motion@9.0.1";
const btnStyle = {
color:'white',
fontFamily:'system-ui',
backgroundColor:'black',
padding:10,
paddingLeft:32,
paddingRight:32,
letterSpacing:1,
borderRadius:20,
cursor:'pointer',
whiteSpace:'nowrap'
}
const App = function() {
const controller = useAnimationControls()
console.log(controller)
return (
<div style={{
display:'flex',
flexDirection:'column',
justifyContent:'center',
alignItems:'center',
gap:52,
}}>
<motion.div
style={{
width:100,
height:100,
backgroundColor:'white',
borderRadius:'20px',
display:'flex',
flexDirection:'column',
justifyContent:'center',
alignItems:'center',
fontFamily:'system-ui'
}}
variants={{
rotation:{
rotate:540
},
set:{rotate:0}
}}
transition={{ duration: 3,ease:'linear'}}
animate={controller}
>
hellocode
</motion.div>
<div style={{
display:'flex',
gap:20
}}>
<motion.div
style={btnStyle}
onTap={()=>{
controller.start('rotation')
}}
>start</motion.div>
<motion.div
style={btnStyle}
onTap={()=>{
controller.stop()
}}
>stop</motion.div>
<motion.div
style={btnStyle}
onTap={()=>{
controller.set('set')
}}
>set</motion.div>
</div>
</div>
)
}
const container = document.querySelector("#app")
console.log(container)
const root = ReactDOM.createRoot(container)
root.render(
<StrictMode>
<App />
</StrictMode>
)
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.