Framer Motion: React Animations That Improve UX (Without Ruining Performance)
The animations on the i3k.eu site aren't decoration — they're communication tools. Scroll-triggered reveals, smooth page transitions, micro-interactions on buttons: all built with Framer Motion. Here's our approach: when to animate, when not to, and how to maintain 60fps even on less powerful devices.
Why Framer Motion and Not CSS Animations
When we started building i3k.eu, the first instinct was to use CSS animations and @keyframes for everything. It worked for simple animations — a hover fade-in, a color transition. But when we wanted to implement more complex animations, CSS limitations emerged quickly. The main problem: CSS animations know nothing about React state. If you want to animate an element when it enters the viewport, you need to use Intersection Observer, manage CSS classes manually, and synchronize everything with React's rendering cycle. With Framer Motion, you write <motion.div initial={{ opacity: 0 }} whileInView={{ opacity: 1 }}> and you're done. The component knows when it's visible and animates accordingly. Second problem: page transitions. When the user navigates between pages on i3k.eu, the current page fades out and the new one enters with a slight slide. With pure CSS, managing the exit animation of a component that's about to be unmounted is a nightmare — the component gets removed from the DOM before the animation finishes. Framer Motion solves this with AnimatePresence, which keeps the component in the DOM until the exit animation is complete. Third: spring animations. CSS only supports bezier curves (ease-in, ease-out, cubic-bezier). Framer Motion offers physics-based spring animations that feel much more natural. The bounce of our landing page elements uses spring with stiffness: 100 and damping: 10 — impossible to replicate with CSS.
Scroll-Triggered Reveals and Micro-Interactions on i3k.eu
The i3k.eu homepage heavily uses scroll-triggered reveals: as you scroll, content appears with calibrated animations. Every section — services, products, technologies — has a custom entrance animation. It's not vanity: UX studies show that progressively appearing elements improve readability and user retention by 23% compared to static pages. Our standard pattern for reveal animations uses Framer Motion's useInView hook combined with staggered variants. When a section enters the viewport, children animate one after another with a 100ms delay. The effect is a natural "cascade" that guides the user's eye from top to bottom. The trick is in timing: too-slow animations bore, too-fast ones go unnoticed. After extensive testing, our sweet spot is 300ms duration with 100ms stagger between elements. For micro-interactions, we use whileHover and whileTap on buttons and cards. The "Contact Us" button on the landing page has a subtle scale(1.03) on hover and scale(0.97) on tap — a visual tactile feedback that communicates responsiveness. The technology badges on the RAG Enterprise page have a lift animation (translateY -2px + box-shadow) on hover. Small details that together create a premium experience. Important: we respect the prefers-reduced-motion preference. If the user has enabled reduced motion in their operating system, Framer Motion automatically reduces all animations to instant transitions. Accessibility before beauty.
Performance at 60fps: Optimizations and Internal Rules
Beautiful animations running at 30fps are ugly animations. Our target is constant 60fps on a mid-range laptop (Intel i5, integrated GPU). To achieve this, we follow strict rules. Rule 1: only animate transform and opacity. These are the only CSS properties the browser can animate on the GPU without causing layout recalculation. Never animate width, height, margin, padding, top, left. Framer Motion by default animates transform (x, y, scale, rotate) and opacity, so following this rule is natural. One of our developers once tried to animate an accordion's height — frame drops on mobile were obvious. We replaced it with a scaleY and opacity animation: same visual effect, zero jank. Rule 2: use layout animations sparingly. Framer Motion's layout component is powerful (it automatically recalculates position when the DOM changes), but it's expensive. We only use it where strictly necessary, like filter reorganization in the LetsAI dashboard. For everything else, explicit animations with predefined variants. Rule 3: lazy-load below-the-fold animations. Animated components at the bottom of the page don't mount animations until the user scrolls nearby. This reduces initial JavaScript load and improves Time to Interactive. On i3k.eu, the Framer Motion bundle adds about 32KB gzipped to JavaScript — an acceptable cost for what it offers. Rule 4: test on real devices. Animations that run perfectly on a MacBook Pro M3 can struggle on a 3-year-old Android phone. We regularly test on mid-range devices and have a list of "optional" animations that are disabled on devices with less than 4GB of RAM, detected via navigator.deviceMemory.
Related Services
See how we apply these technologies in our enterprise projects.
Interested?
Contact us to receive a personalized quote.
Securvita S.r.l. — i3k.eu