Animation Component
Animation Component: UIKit provides a powerful animation system with various built-in animations that can be easily applied to elements.
Live Examples
1. Basic Animations
Example Preview - Click buttons to trigger animations
Animate Me!
2. Animation on Scroll
Example Preview - Scroll to see animations
Fade In
This card fades in when scrolled into view.
Slide Left
This card slides from the right.
Scale Up
This card scales up when visible.
Repeat Animation
This animation repeats every time it comes into view.
Ken Burns Effect
This uses the Ken Burns animation effect.
3. Animation with Duration & Delay
Example Preview
Staggered Animations
Delay: 100ms
Delay: 200ms
Delay: 300ms
4. Hover Animations
Example Preview - Hover over cards
Scale Up
Hover to scale up
Shake
Hover to shake
Animation Classes Reference
All Available Animations
| Animation Class | Description | Example |
|---|---|---|
.uk-animation-fade | Fade in/out | Fade effect |
.uk-animation-scale-up | Scale up from center | Scale up |
.uk-animation-scale-down | Scale down to center | Scale down |
.uk-animation-slide-top | Slide from top | Slide top |
.uk-animation-slide-bottom | Slide from bottom | Slide bottom |
.uk-animation-slide-left | Slide from left | Slide left |
.uk-animation-slide-right | Slide from right | Slide right |
.uk-animation-kenburns | Ken Burns effect (zoom pan) | Ken Burns |
.uk-animation-shake | Shake horizontally | Shake |
.uk-animation-stroke | Stroke animation for SVGs | Stroke |
Modifier Classes
| Modifier Class | Description | Usage |
|---|---|---|
.uk-animation-fast | Fast animation (0.1s) | uk-animation-fade uk-animation-fast |
.uk-animation-slow | Slow animation (0.5s) | uk-animation-fade uk-animation-slow |
.uk-animation-reverse | Reverse animation direction | uk-animation-slide-top uk-animation-reverse |
.uk-animation-hover | Trigger on hover | uk-animation-scale-up uk-animation-hover |
JavaScript Methods
Animation Component:
// Get animation instance
const animation = UIkit.animation(element, options);
// Start animation
animation.start();
// Stop animation
animation.stop();
// Check if animating
animation.isAnimating();Scrollspy Component:
// Get scrollspy instance
const scrollspy = UIkit.scrollspy(element, options);
// Update scrollspy
scrollspy.update();
// Get currently active elements
scrollspy.getActive();
// Example: Trigger animation programmatically
const element = document.getElementById('myElement');
UIkit.animation(element, {
name: 'slide-top',
duration: 500
}).start();Complete Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UIKit Animations Demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/css/uikit.min.css" />
<style>
body { padding: 20px; }
.demo-section { margin-bottom: 50px; }
.animated-box {
width: 100px;
height: 100px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
margin: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="uk-container">
<h1>UIKit Animations Demo</h1>
<!-- Animation Controls -->
<div class="demo-section">
<h3>Interactive Animations</h3>
<div class="uk-margin">
<button class="uk-button uk-button-primary" onclick="triggerFade()">Fade Animation</button>
<button class="uk-button uk-button-secondary" onclick="triggerSlide()">Slide Animation</button>
<button class="uk-button uk-button-danger" onclick="triggerScale()">Scale Animation</button>
<button class="uk-button uk-button-default" onclick="resetAnimations()">Reset All</button>
</div>
<div id="demoBox" class="animated-box">
Animation Box
</div>
</div>
<!-- Scroll Animations -->
<div class="demo-section">
<h3>Scroll Triggered Animations</h3>
<div class="uk-grid-small uk-child-width-1-3@m" uk-grid uk-scrollspy="cls: uk-animation-fade; target: .uk-card; delay: 200">
<div>
<div class="uk-card uk-card-primary uk-card-body">
<h4 class="uk-card-title">Card 1</h4>
<p>Fades in on scroll</p>
</div>
</div>
<div>
<div class="uk-card uk-card-secondary uk-card-body" uk-scrollspy="cls: uk-animation-slide-left; delay: 300">
<h4 class="uk-card-title">Card 2</h4>
<p>Slides from left</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body" uk-scrollspy="cls: uk-animation-scale-up; delay: 400">
<h4 class="uk-card-title">Card 3</h4>
<p>Scales up</p>
</div>
</div>
</div>
</div>
<!-- Hover Animations -->
<div class="demo-section">
<h3>Hover Effects</h3>
<div class="uk-grid-small uk-child-width-1-4@m" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-body uk-animation-hover uk-animation-scale-up">
<h5>Scale Up</h5>
<p>Hover me!</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body uk-animation-hover uk-animation-slide-top">
<h5>Slide Up</h5>
<p>Hover me!</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body uk-animation-hover uk-animation-shake">
<h5>Shake</h5>
<p>Hover me!</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body uk-animation-hover uk-animation-slide-left">
<h5>Slide Left</h5>
<p>Hover me!</p>
</div>
</div>
</div>
</div>
</div>
<!-- UIKit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/js/uikit-icons.min.js"></script>
<script>
// Animation Functions
function triggerFade() {
const box = document.getElementById('demoBox');
resetBox(box);
box.classList.add('uk-animation-fade', 'uk-animation-fast');
setTimeout(() => box.classList.remove('uk-animation-fade'), 1000);
}
function triggerSlide() {
const box = document.getElementById('demoBox');
resetBox(box);
box.classList.add('uk-animation-slide-bottom', 'uk-animation-slow');
setTimeout(() => box.classList.remove('uk-animation-slide-bottom'), 1000);
}
function triggerScale() {
const box = document.getElementById('demoBox');
resetBox(box);
box.classList.add('uk-animation-scale-up', 'uk-animation-reverse');
setTimeout(() => box.classList.remove('uk-animation-scale-up'), 1000);
}
function resetAnimations() {
const box = document.getElementById('demoBox');
resetBox(box);
}
function resetBox(box) {
// Remove all animation classes
const classes = box.className.split(' ');
const newClasses = classes.filter(cls => !cls.startsWith('uk-animation-'));
box.className = newClasses.join(' ');
}
// Programmatic animation example
setTimeout(() => {
const box = document.getElementById('demoBox');
UIkit.animation(box, {
name: 'slide-right',
duration: 1000
}).start();
}, 2000);
</script>
</body>
</html>Animation Options
| Option | Type | Default | Description |
|---|---|---|---|
name | String | 'fade' | Animation name (fade, slide-top, etc.) |
duration | Number | 200 | Animation duration in ms |
timing | String | 'ease' | Animation timing function |
delay | Number | 0 | Delay before animation starts |
reverse | Boolean | false | Play animation in reverse |
infinite | Boolean | false | Repeat animation infinitely |
Scrollspy Options
| Option | Type | Default | Description |
|---|---|---|---|
cls | String | 'uk-active' | Class to add when in view |
hidden | Boolean | true | Hide elements initially |
offsetTop | Number | 0 | Top offset before triggering |
offsetLeft | Number | 0 | Left offset before triggering |
repeat | Boolean | false | Repeat animation on every view |
delay | Number | 0 | Delay before animation starts |
Best Practices:
- Use subtle animations for better user experience
- Keep animation durations short (200-500ms)
- Use consistent animation patterns throughout your site
- Consider performance - avoid animating too many elements at once
- Test animations on different devices and browsers
- Provide animation controls for users with motion sensitivity
- Use scroll animations sparingly - too many can be distracting
Custom Animation Example
/* Custom Animation CSS */
@keyframes custom-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
@keyframes custom-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes custom-gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* UIKit compatible custom animation classes */
.uk-animation-custom-bounce {
animation: custom-bounce 0.5s ease infinite;
}
.uk-animation-custom-spin {
animation: custom-spin 2s linear infinite;
}
.uk-animation-custom-gradient {
background: linear-gradient(135deg, #667eea, #764ba2, #f093fb, #f5576c);
background-size: 400% 400%;
animation: custom-gradient 3s ease infinite;
}
/* Usage in HTML */
<div class="uk-card uk-animation-custom-bounce">
Bouncing Card
</div>
<div class="uk-card uk-animation-custom-spin">
Spinning Icon
</div>
<div class="uk-card uk-animation-custom-gradient">
Gradient Background
</div>