velocity-react

import React, { useState } from 'react'; import ReactDOM from 'react-dom'; import { VelocityComponent } from 'velocity-react'; // IMPORTANT: Ensure Velocity.js and its UI pack are loaded globally or via your bundler // In a typical application entry point (e.g., index.js, App.js), you would add: // require('velocity-animate'); // require('velocity-animate/velocity.ui'); // If you plan to use UI pack effects function AnimatedBox() { const [isVisible, setIsVisible] = useState(true); return ( <div style={{ padding: '20px' }}> <button onClick={() => setIsVisible(!isVisible)}> Toggle Animated Box </button> <VelocityComponent animation={isVisible ? { opacity: 1, translateX: 0 } : { opacity: 0, translateX: 50 }} duration={500} easing="ease-in-out" runOnMount={true} // Animates on initial mount > <div style={{ width: '120px', height: '120px', backgroundColor: '#61dafb', marginTop: '20px', borderRadius: '10px', display: isVisible ? 'flex' : 'none', // Use display: 'none' to remove from flow when hidden alignItems: 'center', justifyContent: 'center', color: 'white', fontSize: '18px', fontWeight: 'bold' }} > Velocity Box </div> </VelocityComponent> </div> ); } // Standard ReactDOM rendering setup for a client-side application const rootElement = document.getElementById('root'); if (!rootElement) { const newRoot = document.createElement('div'); newRoot.id = 'root'; document.body.appendChild(newRoot); } // For React 18+, use createRoot. For compatibility, this example uses ReactDOM.render. ReactDOM.render(<AnimatedBox />, document.getElementById('root'));