@erosnicolau/animated-text
Version:
Advanced React animated text component with comprehensive animation effects
6 lines (5 loc) • 1.78 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const EasingTab = () => {
return (_jsxs("div", { className: "space-y-6", children: [_jsx("h3", { className: "text-xl font-bold text-green-600 mb-4", children: "5 Easing Options" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "p-4 bg-green-50 rounded border", children: [_jsx("h4", { className: "font-semibold text-green-700 mb-2 font-mono", children: "ease" }), _jsx("p", { className: "text-sm text-gray-600", children: "Default smooth transition - slow start, fast middle, slow end" })] }), _jsxs("div", { className: "p-4 bg-green-50 rounded border", children: [_jsx("h4", { className: "font-semibold text-green-700 mb-2 font-mono", children: "ease-in" }), _jsx("p", { className: "text-sm text-gray-600", children: "Slow start, accelerates toward the end" })] }), _jsxs("div", { className: "p-4 bg-green-50 rounded border", children: [_jsx("h4", { className: "font-semibold text-green-700 mb-2 font-mono", children: "ease-out" }), _jsx("p", { className: "text-sm text-gray-600", children: "Fast start, decelerates toward the end" })] }), _jsxs("div", { className: "p-4 bg-green-50 rounded border", children: [_jsx("h4", { className: "font-semibold text-green-700 mb-2 font-mono", children: "ease-in-out" }), _jsx("p", { className: "text-sm text-gray-600", children: "Slow start and end, fast in the middle" })] }), _jsxs("div", { className: "p-4 bg-green-50 rounded border md:col-span-2", children: [_jsx("h4", { className: "font-semibold text-green-700 mb-2 font-mono", children: "linear" }), _jsx("p", { className: "text-sm text-gray-600", children: "Constant speed throughout the entire animation" })] })] })] }));
};
export default EasingTab;