Experiment with spring physics, easing curves, scroll-driven animations, micro-interactions, and animated text effects.
Scroll through the sections below to trigger different animation patterns.
Elements glide into view from below with a natural deceleration curve.
Sequential delays create a cascading reveal effect across elements.
Animations only trigger when elements enter the visible viewport.
Consistent visual language across the application
Standardized animation durations and easings
Reusable micro-interaction components
Respects prefers-reduced-motion preferences
GPU-accelerated animations with transform and opacity
Adapts animation intensity to device capabilities
Elements move at different speeds relative to scroll position, creating a sense of depth and immersion.
// Framer Motion spring config
const transition = {
type: "spring",
mass: 1,
stiffness: 200,
damping: 10,
};
// Usage
<motion.div
animate={{ x: 0, scale: 1 }}
transition={transition}
/>transition-timing-function: cubic-bezier(0.42, 0.00, 0.58, 1.00);Drag the control points (P0-P3) to reshape the motion path. P0 and P3 are endpoints. P1 and P2 are bezier handles that control the curve shape.
/* CSS offset-path animation */
.animated-element {
offset-path: path("M 40 250 C 100 50, 300 50, 360 250");
offset-distance: 0%;
animation: move-along-path 2s ease-in-out infinite;
}
@keyframes move-along-path {
0% { offset-distance: 0%; }
100% { offset-distance: 100%; }
}