0
# Animation Functions
1

2
Predefined cubic-bezier timing functions for smooth, professional animations with support for multiple easing modes and mathematical curves.
3

4
## Capabilities
5

6
### Easing Functions
7

8
Functions that return CSS cubic-bezier timing functions for different animation phases.
9

10
```javascript { .api }
11
/**
12
 * Returns easing function for ease-in animations (slow start, fast end)
13
 * @param mode - Easing mode ("quad", "cubic", "quart", "quint", "sine", "expo", "circ", "back")
14
 * @returns CSS cubic-bezier timing function string
15
 */
16
function easeIn(mode: string): string;
17

18
/**
19
 * Returns easing function for ease-out animations (fast start, slow end)
20
 * @param mode - Easing mode ("quad", "cubic", "quart", "quint", "sine", "expo", "circ", "back")
21
 * @returns CSS cubic-bezier timing function string
22
 */
23
function easeOut(mode: string): string;
24

25
/**
26
 * Returns easing function for ease-in-out animations (slow start and end, fast middle)
27
 * @param mode - Easing mode ("quad", "cubic", "quart", "quint", "sine", "expo", "circ", "back")
28
 * @returns CSS cubic-bezier timing function string
29
 */
30
function easeInOut(mode: string): string;
31
```
32

33
## Available Easing Modes
34

35
Each easing function supports the following modes, each providing different mathematical curves:
36

37
- **quad**: Quadratic easing (power of 2)
38
- **cubic**: Cubic easing (power of 3)
39
- **quart**: Quartic easing (power of 4)
40
- **quint**: Quintic easing (power of 5)
41
- **sine**: Sinusoidal easing (sine wave)
42
- **expo**: Exponential easing (exponential curve)
43
- **circ**: Circular easing (quarter circle)
44
- **back**: Back easing (overshoots then settles)
45

46
## Usage Examples
47

48
```javascript
49
import { easeIn, easeOut, easeInOut } from "polished";
50

51
// Basic easing usage in CSS-in-JS
52
const fadeInAnimation = {
53
  opacity: 0,
54
  transition: `opacity 0.3s ${easeIn("quad")}`,
55
  "&.visible": {
56
    opacity: 1
57
  }
58
};
59

60
// Different easing modes for different effects
61
const buttonHover = {
62
  transform: "scale(1)",
63
  transition: `transform 0.2s ${easeOut("back")}`,  // Bouncy effect
64
  "&:hover": {
65
    transform: "scale(1.1)"
66
  }
67
};
68

69
// Complex animations with multiple properties
70
const slideInCard = {
71
  transform: "translateY(100px)",
72
  opacity: 0,
73
  transition: [
74
    `transform 0.6s ${easeOut("expo")}`,
75
    `opacity 0.4s ${easeOut("quad")}`
76
  ].join(", "),
77
  "&.animate-in": {
78
    transform: "translateY(0)",
79
    opacity: 1
80
  }
81
};
82

83
// Comparing different easing types
84
const easingExamples = {
85
  // Gentle, subtle animation
86
  gentle: {
87
    transition: `all 0.3s ${easeInOut("sine")}`
88
  },
89
  
90
  // Sharp, snappy animation
91
  snappy: {
92
    transition: `all 0.2s ${easeOut("quart")}`
93
  },
94
  
95
  // Bouncy, playful animation
96
  bouncy: {
97
    transition: `all 0.4s ${easeOut("back")}`
98
  },
99
  
100
  // Dramatic, attention-grabbing animation
101
  dramatic: {
102
    transition: `all 0.8s ${easeInOut("expo")}`
103
  }
104
};
105
```
106

107
## Animation Patterns
108

109
### Fade Animations
110

111
```javascript
112
import { easeIn, easeOut, easeInOut } from "polished";
113

114
// Fade in from nothing
115
const fadeIn = {
116
  opacity: 0,
117
  transition: `opacity 0.3s ${easeOut("quad")}`,
118
  "&.visible": { opacity: 1 }
119
};
120

121
// Fade out to nothing
122
const fadeOut = {
123
  opacity: 1,
124
  transition: `opacity 0.2s ${easeIn("quad")}`,
125
  "&.hidden": { opacity: 0 }
126
};
127

128
// Cross-fade between states
129
const crossFade = {
130
  opacity: 0.5,
131
  transition: `opacity 0.4s ${easeInOut("sine")}`,
132
  "&.highlighted": { opacity: 1 },
133
  "&.dimmed": { opacity: 0.2 }
134
};
135
```
136

137
### Movement Animations
138

139
```javascript
140
import { easeOut, easeInOut } from "polished";
141

142
// Slide in from side
143
const slideInLeft = {
144
  transform: "translateX(-100%)",
145
  transition: `transform 0.5s ${easeOut("circ")}`,
146
  "&.slide-in": {
147
    transform: "translateX(0)"
148
  }
149
};
150

151
// Smooth scroll-triggered animations
152
const scrollReveal = {
153
  transform: "translateY(60px)",
154
  opacity: 0,
155
  transition: [
156
    `transform 0.8s ${easeOut("expo")}`,
157
    `opacity 0.6s ${easeOut("quad")}`
158
  ].join(", "),
159
  "&.revealed": {
160
    transform: "translateY(0)",
161
    opacity: 1
162
  }
163
};
164
```
165

166
### Interactive Animations
167

168
```javascript
169
import { easeOut, easeInOut } from "polished";
170

171
// Button press effect
172
const buttonPress = {
173
  transform: "scale(1)",
174
  transition: `transform 0.1s ${easeOut("quad")}`,
175
  "&:active": {
176
    transform: "scale(0.98)"
177
  }
178
};
179

180
// Hover grow effect
181
const hoverGrow = {
182
  transform: "scale(1)",
183
  transition: `transform 0.3s ${easeOut("back")}`,
184
  "&:hover": {
185
    transform: "scale(1.05)"
186
  }
187
};
188

189
// Modal entrance
190
const modalEntrance = {
191
  transform: "scale(0.8)",
192
  opacity: 0,
193
  transition: [
194
    `transform 0.3s ${easeOut("back")}`,
195
    `opacity 0.2s ${easeOut("quad")}`
196
  ].join(", "),
197
  "&.open": {
198
    transform: "scale(1)",
199
    opacity: 1
200
  }
201
};
202
```
203

204
## Best Practices
205

206
- Use **easeOut** for entrance animations (elements appearing)
207
- Use **easeIn** for exit animations (elements disappearing)  
208
- Use **easeInOut** for state changes and hover effects
209
- **Gentle modes** (sine, quad) for subtle, frequent animations
210
- **Sharp modes** (quart, quint) for quick, responsive interactions
211
- **Special modes** (back, expo, circ) for distinctive, attention-grabbing effects
212
- Combine different easings for complex animations with multiple properties