<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, #40f, #05f);
}
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.0";


const btnStyle = {
  color:'white',
  fontFamily:'system-ui',
  backgroundColor:'black',
  padding:10,
  paddingLeft:32,
   paddingRight:32,
  letterSpacing:1,
  borderRadius:20,
  cursor:'pointer',
  whiteSpace:'nowrap'
}

const easeNames = [
  "linear","easeIn", "easeOut", "easeInOut","circIn", "circOut", "circInOut","backIn", "backOut", "backInOut","anticipate"
]

const App = function() {
  
   const controller = useAnimationControls()
  
  return (
    <div 
      style={{
        display:'flex',
        flexDirection:'column',
        justifyContent:'center',
          flexWrap:'wrap',
        alignItems:'center',
          gap:52,
      }}
      >
      <div
        style={{
        display:'flex',
        // flexDirection:'column',
        justifyContent:'center',
          flexWrap:'wrap',
        alignItems:'center',
          gap:32
      }}
        >
        {
        easeNames.map((item)=>{
          return (
            <div
        style={{
        display:'flex',
        flexDirection:'column',
        justifyContent:'center',
        alignItems:'center',
        fontFamily:'system-ui',
        gap:12,
        color:'white'
        }}
        >
         <motion.div
            style={{
              width:100,
              height:100,
              backgroundColor:'white',
              borderRadius:'20px'
            }}
           transition={{
                  duration:2,
                   ease:item
                }}
           animate={controller}

            >
          </motion.div>
        <span 
            style={
                  {opacity:0.5,
                  letterSpacing:2}
                }
          >{item}</span>
      </div>)
        })
      }
      </div>
      <div
        
        style={{
          display:'flex',
            gap:100
        }}
        
        >
        <div
        style={btnStyle}
        animate={controller}
        onClick={
          ()=>{
      
            controller.start({y:-200})
          }
        }
        >
        
         开始
        
        </div>
        <div
        style={btnStyle}
        animate={controller}
        onClick={
          ()=>{
        
            controller.set({y:0})
          }
        }
        >
        
         还原
        
        </div>
      </div>
      
      
      
    </div>

  )
}

const container = document.querySelector("#app")
console.log(container)
const root = ReactDOM.createRoot(container)
root.render(
 <StrictMode>
    <App />
  </StrictMode>
)

View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.