Skip to main content

Components Blocks Templates Customize Docs Blog GitHub

Loading...

Getting Started

Introduction
Installation
Quick Start
TypeScript Setup

Core Concepts

Animation Principles
Styling Guide
Accessibility
Performance

Components

Overview
Buttons
Forms
Feedback
Layout

Customization

Theming
CSS Variables
Dark Mode

API Reference

Hooks
Utilities
Types

On This Page

Performance First
GPU-Accelerated Properties
Property Reference
Motion Values
The Problem
The Solution
Derived Motion Values
Spring Physics vs Duration
Lazy Loading Components
Bundle Size Optimization
Tree Shaking
Framer Motion Reduce Bundle
Bundle Analysis
Reducing Re-renders
Memoize Components
Isolate Animated Components
Animation Performance Tips
1. Use `layoutId` Sparingly
2. Avoid Animating During Scroll
3. Set `once: true` for Entrance Animations
4. Use Hardware Acceleration Hints
Measuring Performance
React DevTools Profiler
Chrome DevTools
Custom FPS Monitor
Performance Checklist
Next Steps

Docs/Core Concepts/Performance

Performance

Optimize Kinetik components for 60fps animations and fast load times.

Edit this page on GitHub