0
# UI Animation Sequences
1

2
Velocity provides 78 pre-built animation sequences organized into categories for common interface animations. These sequences combine multiple property animations with optimized timing and easing.
3

4
## Using Sequences
5

6
```typescript { .api }
7
function Velocity(
8
  elements: VelocityElements,
9
  sequence: string,
10
  options?: VelocityOptions
11
): VelocityResult;
12

13
function Velocity(
14
  elements: VelocityElements,
15
  sequence: string, 
16
  duration?: number,
17
  complete?: VelocityCallbackFn
18
): VelocityResult;
19
```
20

21
## Attention Seekers (10 sequences)
22

23
Animations designed to draw attention to elements without changing their position in the layout.
24

25
```typescript { .api }
26
interface AttentionSeekers {
27
  bounce: SequenceList;
28
  flash: SequenceList;
29
  headShake: SequenceList;
30
  jello: SequenceList;
31
  pulse: SequenceList;
32
  rubberBand: SequenceList;
33
  shake: SequenceList;
34
  swing: SequenceList;
35
  tada: SequenceList;
36
  wobble: SequenceList;
37
}
38
```
39

40
### Bounce
41
Bounces the element up and down with decreasing intensity.
42

43
### Flash
44
Rapidly toggles opacity to create a flashing effect.
45

46
### Head Shake
47
Shakes the element horizontally like a "no" gesture.
48

49
### Jello
50
Creates a jello-like wobble with elastic distortion.
51

52
### Pulse
53
Smoothly scales the element up and down.
54

55
### Rubber Band
56
Stretches and contracts the element like a rubber band.
57

58
### Shake
59
Rapidly moves the element left and right.
60

61
### Swing
62
Rotates the element back and forth like a pendulum.
63

64
### Tada
65
Combines scaling and rotation for a celebratory effect.
66

67
### Wobble
68
Creates an irregular wobbling motion.
69

70
## Bouncing Entrances (6 sequences)
71

72
Elements bounce in from off-screen positions with elastic landing effects.
73

74
```typescript { .api }
75
interface BouncingEntrances {
76
  bounceIn: SequenceList;
77
  bounceInDown: SequenceList;
78
  bounceInLeft: SequenceList;
79
  bounceInRight: SequenceList;
80
  bounceInUp: SequenceList;
81
}
82
```  
83

84
### Bounce In
85
Scales element from 0 to full size with bouncing motion.
86

87
### Bounce In Down
88
Element bounces in from above the viewport.
89

90
### Bounce In Left
91
Element bounces in from the left side.
92

93
### Bounce In Right
94
Element bounces in from the right side.
95

96
### Bounce In Up
97
Element bounces in from below the viewport.
98

99
## Bouncing Exits (5 sequences)
100

101
Elements bounce out to off-screen positions with elastic departure effects.
102

103
```typescript { .api }
104
interface BouncingExits {
105
  bounceOut: SequenceList;
106
  bounceOutDown: SequenceList;
107
  bounceOutLeft: SequenceList;
108
  bounceOutRight: SequenceList;
109
  bounceOutUp: SequenceList;
110
}
111
```
112

113
### Bounce Out
114
Scales element down to 0 with bouncing motion.
115

116
### Bounce Out Down
117
Element bounces out downward off-screen.
118

119
### Bounce Out Left
120
Element bounces out to the left side.
121

122
### Bounce Out Right
123
Element bounces out to the right side.
124

125
### Bounce Out Up
126
Element bounces out upward off-screen.
127

128
## Fading Entrances (10 sequences)
129

130
Elements fade in while moving from off-screen positions.
131

132
```typescript { .api }
133
interface FadingEntrances {
134
  fadeIn: SequenceList;
135
  fadeInDown: SequenceList;
136
  fadeInDownBig: SequenceList;
137
  fadeInLeft: SequenceList;
138
  fadeInLeftBig: SequenceList;
139
  fadeInRight: SequenceList;
140
  fadeInRightBig: SequenceList;
141
  fadeInUp: SequenceList;
142
  fadeInUpBig: SequenceList;
143
}
144
```
145

146
### Fade In
147
Simple opacity fade from 0 to 1.
148

149
### Fade In Down
150
Fades in while moving from above.
151

152
### Fade In Down Big
153
Fades in from far above with larger movement distance.
154

155
### Fade In Left
156
Fades in while moving from the left.
157

158
### Fade In Left Big
159
Fades in from far left with larger movement distance.
160

161
### Fade In Right
162
Fades in while moving from the right.
163

164
### Fade In Right Big
165
Fades in from far right with larger movement distance.
166

167
### Fade In Up
168
Fades in while moving from below.
169

170
### Fade In Up Big
171
Fades in from far below with larger movement distance.
172

173
## Fading Exits (9 sequences)
174

175
Elements fade out while moving to off-screen positions.
176

177
```typescript { .api }
178
interface FadingExits {
179
  fadeOut: SequenceList;
180
  fadeOutDown: SequenceList;
181
  fadeOutDownBig: SequenceList;
182
  fadeOutLeft: SequenceList;
183
  fadeOutLeftBig: SequenceList;
184
  fadeOutRight: SequenceList;
185
  fadeOutRightBig: SequenceList;
186
  fadeOutUp: SequenceList;
187
  fadeOutUpBig: SequenceList;
188
}
189
```
190

191
Similar to fading entrances but in reverse - elements fade out while moving off-screen.
192

193
## Flippers (5 sequences)
194

195
3D flip animations around different axes.
196

197
```typescript { .api }
198
interface Flippers {
199
  flip: SequenceList;
200
  flipInX: SequenceList;
201
  flipInY: SequenceList;
202
  flipOutX: SequenceList;
203
  flipOutY: SequenceList;
204
}
205
```
206

207
### Flip
208
Generic flip animation with 3D rotation.
209

210
### Flip In X
211
Flips in around the X-axis (horizontal flip).
212

213
### Flip In Y
214
Flips in around the Y-axis (vertical flip).
215

216
### Flip Out X
217
Flips out around the X-axis.
218

219
### Flip Out Y
220
Flips out around the Y-axis.
221

222
## Lightspeed (2 sequences)
223

224
High-speed animations with skewing effects.
225

226
```typescript { .api }
227
interface Lightspeed {
228
  lightSpeedIn: SequenceList;
229
  lightSpeedOut: SequenceList;
230
}
231
```
232

233
### Light Speed In
234
Fast entry with skewing effect simulating light speed.
235

236
### Light Speed Out
237
Fast exit with skewing effect.
238

239
## Rotating Entrances (5 sequences)
240

241
Elements rotate in from off-screen positions.
242

243
```typescript { .api }
244
interface RotatingEntrances {
245
  rotateIn: SequenceList;
246
  rotateInDownLeft: SequenceList;
247
  rotateInDownRight: SequenceList;
248
  rotateInUpLeft: SequenceList;
249
  rotateInUpRight: SequenceList;
250
}
251
```
252

253
### Rotate In
254
Rotates in with scaling from center.
255

256
### Rotate In Down Left
257
Rotates in from the down-left corner.
258

259
### Rotate In Down Right
260
Rotates in from the down-right corner.
261

262
### Rotate In Up Left
263
Rotates in from the up-left corner.
264

265
### Rotate In Up Right
266
Rotates in from the up-right corner.
267

268
## Rotating Exits (5 sequences)
269

270
Elements rotate out to off-screen positions.
271

272
```typescript { .api }
273
interface RotatingExits {
274
  rotateOut: SequenceList;
275
  rotateOutDownLeft: SequenceList;
276
  rotateOutDownRight: SequenceList;
277
  rotateOutUpLeft: SequenceList;
278
  rotateOutUpRight: SequenceList;
279
}
280
```
281

282
Similar to rotating entrances but in reverse.
283

284
## Sliding Entrances (4 sequences)
285

286
Elements slide in from off-screen positions.
287

288
```typescript { .api }
289
interface SlidingEntrances {
290
  slideInDown: SequenceList;
291
  slideInLeft: SequenceList;
292
  slideInRight: SequenceList;
293
  slideInUp: SequenceList;
294
}
295
```
296

297
### Slide In Down
298
Slides in from above the viewport.
299

300
### Slide In Left
301
Slides in from the left side.
302

303
### Slide In Right
304
Slides in from the right side.
305

306
### Slide In Up
307
Slides in from below the viewport.
308

309
## Sliding Exits (4 sequences)
310

311
Elements slide out to off-screen positions.
312

313
```typescript { .api }
314
interface SlidingExits {
315
  slideOutDown: SequenceList;
316
  slideOutLeft: SequenceList;
317
  slideOutRight: SequenceList;
318
  slideOutUp: SequenceList;
319
}
320
```
321

322
Similar to sliding entrances but in reverse.
323

324
## Specials (4 sequences)
325

326
Unique animations with special effects.
327

328
```typescript { .api }
329
interface Specials {
330
  hinge: SequenceList;
331
  jackInTheBox: SequenceList;
332
  rollIn: SequenceList;
333
  rollOut: SequenceList;
334
}
335
```
336

337
### Hinge
338
Simulates a door swinging on a hinge.
339

340
### Jack In The Box
341
Pops up like a jack-in-the-box toy.
342

343
### Roll In
344
Rolls in with rotation and translation.
345

346
### Roll Out
347
Rolls out with rotation and translation.
348

349
## Zooming Entrances (6 sequences)
350

351
Elements zoom in from off-screen positions.
352

353
```typescript { .api }
354
interface ZoomingEntrances {
355
  zoomIn: SequenceList;
356
  zoomInDown: SequenceList;
357
  zoomInLeft: SequenceList;
358
  zoomInRight: SequenceList;
359
  zoomInUp: SequenceList;
360
}
361
```
362

363
### Zoom In
364
Scales up from 0 to full size.
365

366
### Zoom In Down
367
Zooms in while moving from above.
368

369
### Zoom In Left
370
Zooms in while moving from the left.
371

372
### Zoom In Right
373
Zooms in while moving from the right.
374

375
### Zoom In Up
376
Zooms in while moving from below.
377

378
## Zooming Exits (5 sequences)
379

380
Elements zoom out to off-screen positions.
381

382
```typescript { .api }
383
interface ZoomingExits {
384
  zoomOut: SequenceList;
385
  zoomOutDown: SequenceList;
386
  zoomOutLeft: SequenceList;
387
  zoomOutRight: SequenceList;
388
  zoomOutUp: SequenceList;
389
}
390
```
391

392
Similar to zooming entrances but in reverse.
393

394
## Sequence Types
395

396
```typescript { .api }
397
interface SequenceList {
398
  duration: number;
399
  [sequenceStep: number]: Properties<any>;
400
}
401

402
type VelocitySequence = 
403
  | string 
404
  | SequenceList
405
  | Array<Properties<any>>;
406
```
407

408
## Usage Examples
409

410
### Basic Sequence Usage
411

412
```typescript
413
import Velocity from "velocity-animate";
414

415
// Simple attention seeker
416
Velocity(element, "bounce");
417

418
// Entrance animation
419
Velocity(element, "fadeInUp", { duration: 800 });
420

421
// Exit animation with callback
422
Velocity(element, "slideOutLeft", {
423
  duration: 600,
424
  complete: () => element.style.display = "none"
425
});
426
```
427

428
### Chaining Sequences
429

430
```typescript
431
// Entrance -> attention -> exit sequence
432
Velocity(element, "bounceIn", 600)
433
  .then(() => new Promise(resolve => setTimeout(resolve, 1000)))
434
  .then(() => Velocity(element, "pulse", 400))
435
  .then(() => Velocity(element, "fadeOut", 500));
436
```
437

438
### Custom Duration and Options
439

440
```typescript
441
// Override default duration
442
Velocity(element, "rubberBand", {
443
  duration: 1200,  // Slower than default
444
  loop: 2,         // Repeat twice
445
  delay: 300       // Start after delay
446
});
447

448
// Multiple elements with stagger
449
Velocity(elements, "slideInUp", {
450
  duration: 800,
451
  stagger: 150,    // 150ms between each element
452
  easing: "easeOutBounce"
453
});
454
```
455

456
### Registering Custom Sequences
457

458
```typescript
459
// Register a custom sequence
460
Velocity.Sequences.customWiggle = {
461
  duration: 1000,
462
  0: { rotateZ: "0deg" },
463
  25: { rotateZ: "5deg" },
464
  50: { rotateZ: "-5deg" },
465
  75: { rotateZ: "3deg" },
466
  100: { rotateZ: "0deg" }
467
};
468

469
// Use the custom sequence
470
Velocity(element, "customWiggle");
471
```
472

473
### Sequence Variations
474

475
```typescript
476
// Use different variations of similar sequences
477
Velocity(element1, "fadeIn");           // Simple fade
478
Velocity(element2, "fadeInUp");         // Fade with upward motion
479
Velocity(element3, "fadeInUpBig");      // Fade with large upward motion
480

481
// Compare different entrance styles
482
Velocity(element1, "bounceInLeft");     // Bouncy entrance
483
Velocity(element2, "slideInLeft");      // Smooth entrance  
484
Velocity(element3, "zoomInLeft");       // Scaling entrance
485
```
486

487
### Responsive Sequences
488

489
```typescript
490
// Different sequences based on screen size
491
const isMobile = window.innerWidth < 768;
492

493
if (isMobile) {
494
  // Simpler animations for mobile
495
  Velocity(element, "fadeIn", { duration: 400 });
496
} else {
497
  // More elaborate animations for desktop
498
  Velocity(element, "bounceInDown", { duration: 800 });
499
}
500
```