tessl/npm-uikit

UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.

—

Pending

Overview

Eval results

Files

Animation & Effects

Name: tessl/npm-uikit
Author: tessl

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

Capabilities

CSS Animations

Pre-built CSS animations for common effects.

/* Fade Animations */
.uk-animation-fade { /* Fade in animation */ animation: uk-fade 0.5s ease-out both; }
.uk-animation-fade-out { /* Fade out animation */ animation: uk-fade 0.5s ease-out reverse both; }

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

/* Slide Animations */
.uk-animation-slide-top { /* Slide from top */ animation: uk-slide-top 0.5s ease-out both; }
.uk-animation-slide-bottom { /* Slide from bottom */ animation: uk-slide-bottom 0.5s ease-out both; }
.uk-animation-slide-left { /* Slide from left */ animation: uk-slide-left 0.5s ease-out both; }
.uk-animation-slide-right { /* Slide from right */ animation: uk-slide-right 0.5s ease-out both; }
.uk-animation-slide-top-small { /* Small slide from top */ animation: uk-slide-top-small 0.5s ease-out both; }
.uk-animation-slide-bottom-small { /* Small slide from bottom */ animation: uk-slide-bottom-small 0.5s ease-out both; }
.uk-animation-slide-left-small { /* Small slide from left */ animation: uk-slide-left-small 0.5s ease-out both; }
.uk-animation-slide-right-small { /* Small slide from right */ animation: uk-slide-right-small 0.5s ease-out both; }
.uk-animation-slide-top-medium { /* Medium slide from top */ animation: uk-slide-top-medium 0.5s ease-out both; }
.uk-animation-slide-bottom-medium { /* Medium slide from bottom */ animation: uk-slide-bottom-medium 0.5s ease-out both; }
.uk-animation-slide-left-medium { /* Medium slide from left */ animation: uk-slide-left-medium 0.5s ease-out both; }
.uk-animation-slide-right-medium { /* Medium slide from right */ animation: uk-slide-right-medium 0.5s ease-out both; }

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

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

/* Animation Modifiers */
.uk-animation-reverse { /* Reverse animation direction */ animation-direction: reverse; }
.uk-animation-fast { /* Fast animation speed */ animation-duration: 0.1s; }
.uk-animation-slow { /* Slow animation speed */ animation-duration: 2s; }

Usage Examples:

<!-- Basic Animations -->
<div class="uk-animation-fade">Fade in content</div>
<div class="uk-animation-slide-bottom">Slide up content</div>
<div class="uk-animation-scale-up">Scale up content</div>

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

<!-- Scroll-triggered Animation -->
<div class="uk-scrollspy-inview uk-animation-slide-bottom" uk-scrollspy-class="uk-animation-slide-bottom">
    Animates when scrolled into view
</div>

Transition Effects

CSS transition utilities for smooth state changes.

/* Transition Toggle Container */
.uk-transition-toggle {
  /* Container for transition effects */
  overflow: hidden;
}

/* Fade Transitions */
.uk-transition-fade {
  /* Fade transition effect */
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.uk-transition-toggle:hover .uk-transition-fade,
.uk-transition-toggle.uk-hover .uk-transition-fade {
  /* Fade in on hover */
  opacity: 1;
}

/* Scale Transitions */
.uk-transition-scale-up {
  /* Scale up transition */
  transform: scale(1);
  transition: transform 0.3s ease-out;
}

.uk-transition-toggle:hover .uk-transition-scale-up,
.uk-transition-toggle.uk-hover .uk-transition-scale-up {
  /* Scale up on hover */
  transform: scale(1.1);
}

.uk-transition-scale-down {
  /* Scale down transition */
  transform: scale(1);
  transition: transform 0.3s ease-out;
}

.uk-transition-toggle:hover .uk-transition-scale-down,
.uk-transition-toggle.uk-hover .uk-transition-scale-down {
  /* Scale down on hover */
  transform: scale(0.9);
}

/* Slide Transitions */
.uk-transition-slide-top {
  /* Slide top transition */
  transform: translateY(0);
  transition: transform 0.3s ease-out;
}

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

.uk-transition-slide-bottom {
  /* Slide bottom transition */
  transform: translateY(0);
  transition: transform 0.3s ease-out;
}

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

.uk-transition-slide-left {
  /* Slide left transition */
  transform: translateX(0);
  transition: transform 0.3s ease-out;
}

.uk-transition-toggle:hover .uk-transition-slide-left,
.uk-transition-toggle.uk-hover .uk-transition-slide-left {
  /* Slide left on hover */
  transform: translateX(-100%);
}

.uk-transition-slide-right {
  /* Slide right transition */
  transform: translateX(0);
  transition: transform 0.3s ease-out;
}

.uk-transition-toggle:hover .uk-transition-slide-right,
.uk-transition-toggle.uk-hover .uk-transition-slide-right {
  /* Slide right on hover */
  transform: translateX(100%);
}

/* Transition Opacity */
.uk-transition-opaque {
  /* Opaque transition */
  opacity: 1;
  transition: opacity 0.3s ease-out;
}

.uk-transition-toggle:hover .uk-transition-opaque,
.uk-transition-toggle.uk-hover .uk-transition-opaque {
  /* Become transparent on hover */
  opacity: 0;
}

Usage Examples:

<!-- Image Overlay Transition -->
<div class="uk-transition-toggle" tabindex="0">
    <img src="images/photo.jpg" alt="">
    <div class="uk-position-cover uk-overlay uk-overlay-primary uk-flex uk-flex-center uk-flex-middle uk-transition-fade">
        <p class="uk-h4 uk-margin-remove">Overlay</p>
    </div>
</div>

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

<!-- Multiple Transition Effects -->
<div class="uk-transition-toggle" tabindex="0">
    <div class="uk-card uk-card-default">
        <div class="uk-card-media-top">
            <img class="uk-transition-scale-up" src="images/photo.jpg" alt="">
        </div>
        <div class="uk-card-body">
            <h3 class="uk-card-title uk-transition-slide-bottom-small">Card Title</h3>
            <p class="uk-transition-slide-bottom uk-transition-opaque">Card content that slides and fades.</p>
        </div>
    </div>
</div>

Parallax Effects

Parallax scrolling effects for background elements.

/**
 * Parallax component for scroll-based animations
 */
UIkit.parallax(element: HTMLElement | string, options?: {
  /** Parallax easing function */
  easing?: number;
  /** Target element selector */
  target?: string;
  /** Viewport boundaries */
  viewport?: number;
  /** Media query */
  media?: string;
}): ParallaxComponent;

interface ParallaxComponent {
  /** Parallax element */
  $el: HTMLElement;
}

Usage Examples:

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

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

<!-- Multiple Properties -->
<div class="uk-height-large uk-overflow-hidden uk-flex uk-flex-middle uk-flex-center">
    <div uk-parallax="opacity: 0,1; y: -100,0; scale: 2,1; viewport: 0.5;">
        <h1>Parallax Content</h1>
    </div>
</div>

Scroll Effects

Scroll-triggered animations and effects.

/**
 * Scrollspy component for scroll-triggered animations
 */
UIkit.scrollspy(element: HTMLElement | string, options?: {
  /** CSS class to add */
  cls?: string;
  /** Hidden class */
  hidden?: boolean;
  /** Offset from viewport */
  offset?: number;
  /** Repeat animation */
  repeat?: boolean;
  /** Animation delay */
  delay?: number;
}): ScrollspyComponent;

interface ScrollspyComponent {
  /** Scrollspy element */
  $el: HTMLElement;
}

/**
 * Scrollspy Navigation component for highlighting navigation based on scroll position
 */
UIkit.scrollspyNav(element: HTMLElement | string, options?: {
  /** Navigation items selector */
  cls?: string;
  /** Scroll navigation closest */
  closest?: string;
  /** Scroll behavior */
  scroll?: boolean;
  /** Overflow handling */
  overflow?: boolean;
  /** Offset */
  offset?: number;
}): ScrollspyNavComponent;

interface ScrollspyNavComponent {
  /** Scrollspy nav element */
  $el: HTMLElement;
}

Usage Examples:

<!-- Scrollspy Animation -->
<div uk-scrollspy="cls: uk-animation-slide-bottom; target: .uk-card; delay: 300; repeat: true">
    <div class="uk-card uk-card-default uk-card-body">Card 1</div>
    <div class="uk-card uk-card-default uk-card-body">Card 2</div>
    <div class="uk-card uk-card-default uk-card-body">Card 3</div>
</div>

<!-- Scrollspy Navigation -->
<nav uk-scrollspy-nav="closest: li; scroll: true">
    <ul class="uk-nav uk-nav-default">
        <li><a href="#section-1">Section 1</a></li>
        <li><a href="#section-2">Section 2</a></li>
        <li><a href="#section-3">Section 3</a></li>
    </ul>
</nav>

<!-- Individual Element Scrollspy -->
<div class="uk-child-width-1-3@m" uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">Title</h3>
            <p>Content that animates when scrolled into view.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">Title</h3>
            <p>Content that animates when scrolled into view.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">Title</h3>
            <p>Content that animates when scrolled into view.</p>
        </div>
    </div>
</div>

Sticky Effects

Sticky positioning for elements that follow the scroll.

/**
 * Sticky component for scroll-following elements
 */
UIkit.sticky(element: HTMLElement | string, options?: {
  /** Sticky positioning */
  position?: 'top' | 'bottom';
  /** Start position */
  start?: string | number;
  /** End position */
  end?: string | number;
  /** Offset */
  offset?: number;
  /** Overflow handling */
  overflow?: boolean;
  /** Animation */
  animation?: string | boolean;
  /** CSS class when active */
  'cls-active'?: string;
  /** CSS class when inactive */
  'cls-inactive'?: string;
  /** Width inherit */
  'width-element'?: string | HTMLElement;
  /** Show on up scroll */
  'show-on-up'?: boolean;
  /** Media query */
  media?: string;
  /** Target height */
  'target-height'?: number | string;
}): StickyComponent;

interface StickyComponent {
  /** Sticky element */
  $el: HTMLElement;
  /** Check if sticky is active */
  isActive(): boolean;
}

Usage Examples:

<!-- Sticky Navigation -->
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; bottom: #transparent-sticky-navbar">
    <nav class="uk-navbar-container" uk-navbar style="position: relative; z-index: 980;">
        <div class="uk-navbar-left">
            <ul class="uk-navbar-nav">
                <li class="uk-active"><a href="">Active</a></li>
                <li><a href="">Item</a></li>
                <li><a href="">Item</a></li>
            </ul>
        </div>
    </nav>
</div>

<!-- Sticky Sidebar -->
<div class="uk-grid">
    <div class="uk-width-2-3@m">
        <article>Main content area</article>
    </div>
    <div class="uk-width-1-3@m">
        <div uk-sticky="offset: 80">
            <aside>Sticky sidebar content that follows scroll</aside>
        </div>
    </div>
</div>

<!-- Sticky with Animation -->
<div uk-sticky="animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
    <nav class="uk-navbar-container" uk-navbar>
        <div class="uk-navbar-center">
            <ul class="uk-navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </nav>
</div>

Custom Animations

Utilities for creating custom animations with data attributes.

<!-- Data Attribute Animations -->
<div uk-scrollspy="cls: uk-animation-slide-bottom; target: .animate; delay: 200">
    <div class="animate">Element 1</div>
    <div class="animate">Element 2</div>
    <div class="animate">Element 3</div>
</div>

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

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

<!-- Staggered Animations -->
<div class="uk-grid" uk-scrollspy="target: > div; cls: uk-animation-slide-bottom; delay: 200">
    <div class="uk-width-1-3"><div class="uk-card uk-card-default uk-card-body">Item 1</div></div>
    <div class="uk-width-1-3"><div class="uk-card uk-card-default uk-card-body">Item 2</div></div>
    <div class="uk-width-1-3"><div class="uk-card uk-card-default uk-card-body">Item 3</div></div>
</div>

Performance Considerations

<!-- Optimized Animations -->
<!-- Use transform and opacity for best performance -->
<div class="uk-animation-slide-bottom"><!-- Uses transform: translateY --></div>
<div class="uk-transition-fade"><!-- Uses opacity --></div>

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

<!-- Use will-change for complex animations -->
<style>
.uk-animation-complex {
    will-change: transform, opacity;
}
</style>

<!-- Reduce motion for accessibility -->
<style>
@media (prefers-reduced-motion: reduce) {
    .uk-animation-fade,
    .uk-transition-fade {
        animation: none;
        transition: none;
    }
}
</style>

Install with Tessl CLI