0
# Animation & Effects
1

2
UIkit's animation and effects system provides CSS animations, transitions, and interactive visual effects for creating dynamic and engaging user interfaces.
3

4
## Capabilities
5

6
### CSS Animations
7

8
Pre-built CSS animations for common effects.
9

10
```css { .api }
11
/* Fade Animations */
12
.uk-animation-fade { /* Fade in animation */ animation: uk-fade 0.5s ease-out both; }
13
.uk-animation-fade-out { /* Fade out animation */ animation: uk-fade 0.5s ease-out reverse both; }
14

15
/* Scale Animations */
16
.uk-animation-scale-up { /* Scale up animation */ animation: uk-scale-up 0.5s ease-out both; }
17
.uk-animation-scale-down { /* Scale down animation */ animation: uk-scale-down 0.5s ease-out both; }
18

19
/* Slide Animations */
20
.uk-animation-slide-top { /* Slide from top */ animation: uk-slide-top 0.5s ease-out both; }
21
.uk-animation-slide-bottom { /* Slide from bottom */ animation: uk-slide-bottom 0.5s ease-out both; }
22
.uk-animation-slide-left { /* Slide from left */ animation: uk-slide-left 0.5s ease-out both; }
23
.uk-animation-slide-right { /* Slide from right */ animation: uk-slide-right 0.5s ease-out both; }
24
.uk-animation-slide-top-small { /* Small slide from top */ animation: uk-slide-top-small 0.5s ease-out both; }
25
.uk-animation-slide-bottom-small { /* Small slide from bottom */ animation: uk-slide-bottom-small 0.5s ease-out both; }
26
.uk-animation-slide-left-small { /* Small slide from left */ animation: uk-slide-left-small 0.5s ease-out both; }
27
.uk-animation-slide-right-small { /* Small slide from right */ animation: uk-slide-right-small 0.5s ease-out both; }
28
.uk-animation-slide-top-medium { /* Medium slide from top */ animation: uk-slide-top-medium 0.5s ease-out both; }
29
.uk-animation-slide-bottom-medium { /* Medium slide from bottom */ animation: uk-slide-bottom-medium 0.5s ease-out both; }
30
.uk-animation-slide-left-medium { /* Medium slide from left */ animation: uk-slide-left-medium 0.5s ease-out both; }
31
.uk-animation-slide-right-medium { /* Medium slide from right */ animation: uk-slide-right-medium 0.5s ease-out both; }
32

33
/* Shake Animation */
34
.uk-animation-shake { /* Shake animation */ animation: uk-shake 0.5s ease-out both; }
35

36
/* Stroke Animation */
37
.uk-animation-stroke { /* SVG stroke animation */ animation: uk-stroke 2s ease-out both; }
38

39
/* Animation Modifiers */
40
.uk-animation-reverse { /* Reverse animation direction */ animation-direction: reverse; }
41
.uk-animation-fast { /* Fast animation speed */ animation-duration: 0.1s; }
42
.uk-animation-slow { /* Slow animation speed */ animation-duration: 2s; }
43
```
44

45
**Usage Examples:**
46

47
```html
48
<!-- Basic Animations -->
49
<div class="uk-animation-fade">Fade in content</div>
50
<div class="uk-animation-slide-bottom">Slide up content</div>
51
<div class="uk-animation-scale-up">Scale up content</div>
52

53
<!-- Animation with Modifiers -->
54
<div class="uk-animation-slide-top uk-animation-fast">Fast slide from top</div>
55
<div class="uk-animation-fade uk-animation-slow">Slow fade in</div>
56

57
<!-- Scroll-triggered Animation -->
58
<div class="uk-scrollspy-inview uk-animation-slide-bottom" uk-scrollspy-class="uk-animation-slide-bottom">
59
    Animates when scrolled into view
60
</div>
61
```
62

63
### Transition Effects
64

65
CSS transition utilities for smooth state changes.
66

67
```css { .api }
68
/* Transition Toggle Container */
69
.uk-transition-toggle {
70
  /* Container for transition effects */
71
  overflow: hidden;
72
}
73

74
/* Fade Transitions */
75
.uk-transition-fade {
76
  /* Fade transition effect */
77
  opacity: 0;
78
  transition: opacity 0.3s ease-out;
79
}
80

81
.uk-transition-toggle:hover .uk-transition-fade,
82
.uk-transition-toggle.uk-hover .uk-transition-fade {
83
  /* Fade in on hover */
84
  opacity: 1;
85
}
86

87
/* Scale Transitions */
88
.uk-transition-scale-up {
89
  /* Scale up transition */
90
  transform: scale(1);
91
  transition: transform 0.3s ease-out;
92
}
93

94
.uk-transition-toggle:hover .uk-transition-scale-up,
95
.uk-transition-toggle.uk-hover .uk-transition-scale-up {
96
  /* Scale up on hover */
97
  transform: scale(1.1);
98
}
99

100
.uk-transition-scale-down {
101
  /* Scale down transition */
102
  transform: scale(1);
103
  transition: transform 0.3s ease-out;
104
}
105

106
.uk-transition-toggle:hover .uk-transition-scale-down,
107
.uk-transition-toggle.uk-hover .uk-transition-scale-down {
108
  /* Scale down on hover */
109
  transform: scale(0.9);
110
}
111

112
/* Slide Transitions */
113
.uk-transition-slide-top {
114
  /* Slide top transition */
115
  transform: translateY(0);
116
  transition: transform 0.3s ease-out;
117
}
118

119
.uk-transition-toggle:hover .uk-transition-slide-top,
120
.uk-transition-toggle.uk-hover .uk-transition-slide-top {
121
  /* Slide up on hover */
122
  transform: translateY(-100%);
123
}
124

125
.uk-transition-slide-bottom {
126
  /* Slide bottom transition */
127
  transform: translateY(0);
128
  transition: transform 0.3s ease-out;
129
}
130

131
.uk-transition-toggle:hover .uk-transition-slide-bottom,
132
.uk-transition-toggle.uk-hover .uk-transition-slide-bottom {
133
  /* Slide down on hover */
134
  transform: translateY(100%);
135
}
136

137
.uk-transition-slide-left {
138
  /* Slide left transition */
139
  transform: translateX(0);
140
  transition: transform 0.3s ease-out;
141
}
142

143
.uk-transition-toggle:hover .uk-transition-slide-left,
144
.uk-transition-toggle.uk-hover .uk-transition-slide-left {
145
  /* Slide left on hover */
146
  transform: translateX(-100%);
147
}
148

149
.uk-transition-slide-right {
150
  /* Slide right transition */
151
  transform: translateX(0);
152
  transition: transform 0.3s ease-out;
153
}
154

155
.uk-transition-toggle:hover .uk-transition-slide-right,
156
.uk-transition-toggle.uk-hover .uk-transition-slide-right {
157
  /* Slide right on hover */
158
  transform: translateX(100%);
159
}
160

161
/* Transition Opacity */
162
.uk-transition-opaque {
163
  /* Opaque transition */
164
  opacity: 1;
165
  transition: opacity 0.3s ease-out;
166
}
167

168
.uk-transition-toggle:hover .uk-transition-opaque,
169
.uk-transition-toggle.uk-hover .uk-transition-opaque {
170
  /* Become transparent on hover */
171
  opacity: 0;
172
}
173
```
174

175
**Usage Examples:**
176

177
```html
178
<!-- Image Overlay Transition -->
179
<div class="uk-transition-toggle" tabindex="0">
180
    <img src="images/photo.jpg" alt="">
181
    <div class="uk-position-cover uk-overlay uk-overlay-primary uk-flex uk-flex-center uk-flex-middle uk-transition-fade">
182
        <p class="uk-h4 uk-margin-remove">Overlay</p>
183
    </div>
184
</div>
185

186
<!-- Scale Transition on Cards -->
187
<div class="uk-transition-toggle uk-light" tabindex="0">
188
    <img class="uk-transition-scale-up uk-transition-opaque" src="images/photo.jpg" alt="">
189
    <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
190
        <div class="uk-transition-slide-bottom-small">
191
            <h4 class="uk-margin-remove">Headline</h4>
192
            <p class="uk-margin-remove">Lorem ipsum dolor sit amet.</p>
193
        </div>
194
    </div>
195
</div>
196

197
<!-- Multiple Transition Effects -->
198
<div class="uk-transition-toggle" tabindex="0">
199
    <div class="uk-card uk-card-default">
200
        <div class="uk-card-media-top">
201
            <img class="uk-transition-scale-up" src="images/photo.jpg" alt="">
202
        </div>
203
        <div class="uk-card-body">
204
            <h3 class="uk-card-title uk-transition-slide-bottom-small">Card Title</h3>
205
            <p class="uk-transition-slide-bottom uk-transition-opaque">Card content that slides and fades.</p>
206
        </div>
207
    </div>
208
</div>
209
```
210

211
### Parallax Effects
212

213
Parallax scrolling effects for background elements.
214

215
```javascript { .api }
216
/**
217
 * Parallax component for scroll-based animations
218
 */
219
UIkit.parallax(element: HTMLElement | string, options?: {
220
  /** Parallax easing function */
221
  easing?: number;
222
  /** Target element selector */
223
  target?: string;
224
  /** Viewport boundaries */
225
  viewport?: number;
226
  /** Media query */
227
  media?: string;
228
}): ParallaxComponent;
229

230
interface ParallaxComponent {
231
  /** Parallax element */
232
  $el: HTMLElement;
233
}
234
```
235

236
**Usage Examples:**
237

238
```html
239
<!-- Background Parallax -->
240
<div class="uk-height-large uk-background-cover uk-light uk-flex" 
241
     uk-parallax="bgy: -200" 
242
     style="background-image: url('images/photo.jpg');">
243
    <h1 class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">Headline</h1>
244
</div>
245

246
<!-- Element Parallax -->
247
<div class="uk-height-large uk-overflow-hidden">
248
    <div class="uk-height-large uk-background-cover" 
249
         uk-parallax="bgy: -200; easing: 0" 
250
         style="background-image: url('images/photo.jpg');">
251
    </div>
252
</div>
253

254
<!-- Multiple Properties -->
255
<div class="uk-height-large uk-overflow-hidden uk-flex uk-flex-middle uk-flex-center">
256
    <div uk-parallax="opacity: 0,1; y: -100,0; scale: 2,1; viewport: 0.5;">
257
        <h1>Parallax Content</h1>
258
    </div>
259
</div>
260
```
261

262
### Scroll Effects
263

264
Scroll-triggered animations and effects.
265

266
```javascript { .api }
267
/**
268
 * Scrollspy component for scroll-triggered animations
269
 */
270
UIkit.scrollspy(element: HTMLElement | string, options?: {
271
  /** CSS class to add */
272
  cls?: string;
273
  /** Hidden class */
274
  hidden?: boolean;
275
  /** Offset from viewport */
276
  offset?: number;
277
  /** Repeat animation */
278
  repeat?: boolean;
279
  /** Animation delay */
280
  delay?: number;
281
}): ScrollspyComponent;
282

283
interface ScrollspyComponent {
284
  /** Scrollspy element */
285
  $el: HTMLElement;
286
}
287

288
/**
289
 * Scrollspy Navigation component for highlighting navigation based on scroll position
290
 */
291
UIkit.scrollspyNav(element: HTMLElement | string, options?: {
292
  /** Navigation items selector */
293
  cls?: string;
294
  /** Scroll navigation closest */
295
  closest?: string;
296
  /** Scroll behavior */
297
  scroll?: boolean;
298
  /** Overflow handling */
299
  overflow?: boolean;
300
  /** Offset */
301
  offset?: number;
302
}): ScrollspyNavComponent;
303

304
interface ScrollspyNavComponent {
305
  /** Scrollspy nav element */
306
  $el: HTMLElement;
307
}
308
```
309

310
**Usage Examples:**
311

312
```html
313
<!-- Scrollspy Animation -->
314
<div uk-scrollspy="cls: uk-animation-slide-bottom; target: .uk-card; delay: 300; repeat: true">
315
    <div class="uk-card uk-card-default uk-card-body">Card 1</div>
316
    <div class="uk-card uk-card-default uk-card-body">Card 2</div>
317
    <div class="uk-card uk-card-default uk-card-body">Card 3</div>
318
</div>
319

320
<!-- Scrollspy Navigation -->
321
<nav uk-scrollspy-nav="closest: li; scroll: true">
322
    <ul class="uk-nav uk-nav-default">
323
        <li><a href="#section-1">Section 1</a></li>
324
        <li><a href="#section-2">Section 2</a></li>
325
        <li><a href="#section-3">Section 3</a></li>
326
    </ul>
327
</nav>
328

329
<!-- Individual Element Scrollspy -->
330
<div class="uk-child-width-1-3@m" uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">
331
    <div>
332
        <div class="uk-card uk-card-default uk-card-body">
333
            <h3 class="uk-card-title">Title</h3>
334
            <p>Content that animates when scrolled into view.</p>
335
        </div>
336
    </div>
337
    <div>
338
        <div class="uk-card uk-card-default uk-card-body">
339
            <h3 class="uk-card-title">Title</h3>
340
            <p>Content that animates when scrolled into view.</p>
341
        </div>
342
    </div>
343
    <div>
344
        <div class="uk-card uk-card-default uk-card-body">
345
            <h3 class="uk-card-title">Title</h3>
346
            <p>Content that animates when scrolled into view.</p>
347
        </div>
348
    </div>
349
</div>
350
```
351

352
### Sticky Effects
353

354
Sticky positioning for elements that follow the scroll.
355

356
```javascript { .api }
357
/**
358
 * Sticky component for scroll-following elements
359
 */
360
UIkit.sticky(element: HTMLElement | string, options?: {
361
  /** Sticky positioning */
362
  position?: 'top' | 'bottom';
363
  /** Start position */
364
  start?: string | number;
365
  /** End position */
366
  end?: string | number;
367
  /** Offset */
368
  offset?: number;
369
  /** Overflow handling */
370
  overflow?: boolean;
371
  /** Animation */
372
  animation?: string | boolean;
373
  /** CSS class when active */
374
  'cls-active'?: string;
375
  /** CSS class when inactive */
376
  'cls-inactive'?: string;
377
  /** Width inherit */
378
  'width-element'?: string | HTMLElement;
379
  /** Show on up scroll */
380
  'show-on-up'?: boolean;
381
  /** Media query */
382
  media?: string;
383
  /** Target height */
384
  'target-height'?: number | string;
385
}): StickyComponent;
386

387
interface StickyComponent {
388
  /** Sticky element */
389
  $el: HTMLElement;
390
  /** Check if sticky is active */
391
  isActive(): boolean;
392
}
393
```
394

395
**Usage Examples:**
396

397
```html
398
<!-- Sticky Navigation -->
399
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; bottom: #transparent-sticky-navbar">
400
    <nav class="uk-navbar-container" uk-navbar style="position: relative; z-index: 980;">
401
        <div class="uk-navbar-left">
402
            <ul class="uk-navbar-nav">
403
                <li class="uk-active"><a href="">Active</a></li>
404
                <li><a href="">Item</a></li>
405
                <li><a href="">Item</a></li>
406
            </ul>
407
        </div>
408
    </nav>
409
</div>
410

411
<!-- Sticky Sidebar -->
412
<div class="uk-grid">
413
    <div class="uk-width-2-3@m">
414
        <article>Main content area</article>
415
    </div>
416
    <div class="uk-width-1-3@m">
417
        <div uk-sticky="offset: 80">
418
            <aside>Sticky sidebar content that follows scroll</aside>
419
        </div>
420
    </div>
421
</div>
422

423
<!-- Sticky with Animation -->
424
<div uk-sticky="animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
425
    <nav class="uk-navbar-container" uk-navbar>
426
        <div class="uk-navbar-center">
427
            <ul class="uk-navbar-nav">
428
                <li><a href="#">Home</a></li>
429
                <li><a href="#">About</a></li>
430
                <li><a href="#">Contact</a></li>
431
            </ul>
432
        </div>
433
    </nav>
434
</div>
435
```
436

437
### Custom Animations
438

439
Utilities for creating custom animations with data attributes.
440

441
```html
442
<!-- Data Attribute Animations -->
443
<div uk-scrollspy="cls: uk-animation-slide-bottom; target: .animate; delay: 200">
444
    <div class="animate">Element 1</div>
445
    <div class="animate">Element 2</div>
446
    <div class="animate">Element 3</div>
447
</div>
448

449
<!-- Parallax with Multiple Properties -->
450
<div uk-parallax="opacity: 0,1,0; scale: 0.5,1,0.5; rotate: 0,360; viewport: 0.1,0.9">
451
    <h2>Multi-property Parallax</h2>
452
</div>
453

454
<!-- Intersection Observer Based Animations -->
455
<div uk-scrollspy="cls: uk-animation-fade; repeat: true">
456
    <p>This content fades in every time it enters the viewport.</p>
457
</div>
458

459
<!-- Staggered Animations -->
460
<div class="uk-grid" uk-scrollspy="target: > div; cls: uk-animation-slide-bottom; delay: 200">
461
    <div class="uk-width-1-3"><div class="uk-card uk-card-default uk-card-body">Item 1</div></div>
462
    <div class="uk-width-1-3"><div class="uk-card uk-card-default uk-card-body">Item 2</div></div>
463
    <div class="uk-width-1-3"><div class="uk-card uk-card-default uk-card-body">Item 3</div></div>
464
</div>
465
```
466

467
### Performance Considerations
468

469
```html
470
<!-- Optimized Animations -->
471
<!-- Use transform and opacity for best performance -->
472
<div class="uk-animation-slide-bottom"><!-- Uses transform: translateY --></div>
473
<div class="uk-transition-fade"><!-- Uses opacity --></div>
474

475
<!-- Prefer CSS animations over JavaScript -->
476
<div uk-scrollspy="cls: uk-animation-fade"><!-- CSS-based --></div>
477

478
<!-- Use will-change for complex animations -->
479
<style>
480
.uk-animation-complex {
481
    will-change: transform, opacity;
482
}
483
</style>
484

485
<!-- Reduce motion for accessibility -->
486
<style>
487
@media (prefers-reduced-motion: reduce) {
488
    .uk-animation-fade,
489
    .uk-transition-fade {
490
        animation: none;
491
        transition: none;
492
    }
493
}
494
</style>
495
```