CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-primeflex

PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

animation-interaction.mddocs/

Animation & Interaction

PrimeFlex provides utilities for transitions, transforms, keyframe animations, and interactive states to create dynamic and engaging user interfaces. All animation utilities support responsive breakpoints.

Transitions

Transition Properties

.transition-none { transition: none; }
.transition-all { transition: all 150ms ease; }
.transition-colors { transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease; }
.transition-opacity { transition: opacity 150ms ease; }
.transition-shadow { transition: box-shadow 150ms ease; }
.transition-transform { transition: transform 150ms ease; }

Transition Duration

.duration-75 { transition-duration: 75ms; }
.duration-100 { transition-duration: 100ms; }
.duration-150 { transition-duration: 150ms; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }
.duration-700 { transition-duration: 700ms; }
.duration-1000 { transition-duration: 1000ms; }

Transition Timing Functions

.ease-linear { transition-timing-function: linear; }
.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

Transition Delay

.delay-75 { transition-delay: 75ms; }
.delay-100 { transition-delay: 100ms; }
.delay-150 { transition-delay: 150ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-500 { transition-delay: 500ms; }
.delay-700 { transition-delay: 700ms; }
.delay-1000 { transition-delay: 1000ms; }

Transforms

Scale

.scale-0 { transform: scale(0); }
.scale-50 { transform: scale(0.5); }
.scale-75 { transform: scale(0.75); }
.scale-90 { transform: scale(0.9); }
.scale-95 { transform: scale(0.95); }
.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }
.scale-110 { transform: scale(1.1); }
.scale-125 { transform: scale(1.25); }
.scale-150 { transform: scale(1.5); }

Rotate

.rotate-0 { transform: rotate(0deg); }
.rotate-1 { transform: rotate(1deg); }
.rotate-2 { transform: rotate(2deg); }
.rotate-3 { transform: rotate(3deg); }
.rotate-6 { transform: rotate(6deg); }
.rotate-12 { transform: rotate(12deg); }
.rotate-45 { transform: rotate(45deg); }
.rotate-90 { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }
.-rotate-1 { transform: rotate(-1deg); }
.-rotate-2 { transform: rotate(-2deg); }
.-rotate-3 { transform: rotate(-3deg); }
.-rotate-6 { transform: rotate(-6deg); }
.-rotate-12 { transform: rotate(-12deg); }
.-rotate-45 { transform: rotate(-45deg); }
.-rotate-90 { transform: rotate(-90deg); }
.-rotate-180 { transform: rotate(-180deg); }

Translate

.translate-x-0 { transform: translateX(0); }
.translate-x-1 { transform: translateX(0.25rem); }
.translate-x-2 { transform: translateX(0.5rem); }
.translate-x-3 { transform: translateX(1rem); }
.translate-x-4 { transform: translateX(1.5rem); }
.translate-x-5 { transform: translateX(2rem); }
.translate-x-6 { transform: translateX(3rem); }
.translate-x-full { transform: translateX(100%); }
.-translate-x-1 { transform: translateX(-0.25rem); }
.-translate-x-2 { transform: translateX(-0.5rem); }
.-translate-x-3 { transform: translateX(-1rem); }
.-translate-x-4 { transform: translateX(-1.5rem); }
.-translate-x-5 { transform: translateX(-2rem); }
.-translate-x-6 { transform: translateX(-3rem); }
.-translate-x-full { transform: translateX(-100%); }

.translate-y-0 { transform: translateY(0); }
.translate-y-1 { transform: translateY(0.25rem); }
.translate-y-2 { transform: translateY(0.5rem); }
.translate-y-3 { transform: translateY(1rem); }
.translate-y-4 { transform: translateY(1.5rem); }
.translate-y-5 { transform: translateY(2rem); }
.translate-y-6 { transform: translateY(3rem); }
.translate-y-full { transform: translateY(100%); }
.-translate-y-1 { transform: translateY(-0.25rem); }
.-translate-y-2 { transform: translateY(-0.5rem); }
.-translate-y-3 { transform: translateY(-1rem); }
.-translate-y-4 { transform: translateY(-1.5rem); }
.-translate-y-5 { transform: translateY(-2rem); }
.-translate-y-6 { transform: translateY(-3rem); }
.-translate-y-full { transform: translateY(-100%); }

Transform Origin

.origin-center { transform-origin: center; }
.origin-top { transform-origin: top; }
.origin-top-right { transform-origin: top right; }
.origin-right { transform-origin: right; }
.origin-bottom-right { transform-origin: bottom right; }
.origin-bottom { transform-origin: bottom; }
.origin-bottom-left { transform-origin: bottom left; }
.origin-left { transform-origin: left; }
.origin-top-left { transform-origin: top left; }

Keyframe Animations

// Fade animations
.fadein { animation: fadein 150ms linear; }
.fadeout { animation: fadeout 150ms linear; }

// Scale animations
.scalein { animation: scalein 150ms linear; }

// Slide animations
.slidedown { animation: slidedown 150ms ease-out; }
.slideup { animation: slideup 150ms ease-out; }
.slideleft { animation: slideleft 150ms ease-out; }
.slideright { animation: slideright 150ms ease-out; }

Animation Duration Variants

// Fade duration variants
.fadein-duration-100 { animation: fadein 100ms linear; }
.fadein-duration-200 { animation: fadein 200ms linear; }
.fadein-duration-300 { animation: fadein 300ms linear; }
.fadein-duration-500 { animation: fadein 500ms linear; }

.fadeout-duration-100 { animation: fadeout 100ms linear; }
.fadeout-duration-200 { animation: fadeout 200ms linear; }
.fadeout-duration-300 { animation: fadeout 300ms linear; }
.fadeout-duration-500 { animation: fadeout 500ms linear; }

// Scale duration variants
.scalein-duration-100 { animation: scalein 100ms linear; }
.scalein-duration-200 { animation: scalein 200ms linear; }
.scalein-duration-300 { animation: scalein 300ms linear; }
.scalein-duration-500 { animation: scalein 500ms linear; }

// Slide duration variants
.slidedown-duration-100 { animation: slidedown 100ms ease-out; }
.slidedown-duration-200 { animation: slidedown 200ms ease-out; }
.slidedown-duration-300 { animation: slidedown 300ms ease-out; }
.slidedown-duration-500 { animation: slidedown 500ms ease-out; }

// Similar patterns for slideup, slideleft, slideright

Animation Properties

.animation-iteration-infinite { animation-iteration-count: infinite; }
.animation-iteration-1 { animation-iteration-count: 1; }
.animation-iteration-2 { animation-iteration-count: 2; }
.animation-iteration-3 { animation-iteration-count: 3; }

.animation-fill-none { animation-fill-mode: none; }
.animation-fill-forwards { animation-fill-mode: forwards; }
.animation-fill-backwards { animation-fill-mode: backwards; }
.animation-fill-both { animation-fill-mode: both; }

.animation-direction-normal { animation-direction: normal; }
.animation-direction-reverse { animation-direction: reverse; }
.animation-direction-alternate { animation-direction: alternate; }
.animation-direction-alternate-reverse { animation-direction: alternate-reverse; }

Responsive Variants

All animation utilities support responsive breakpoints:

// Small screens (≥576px)
.sm\\:transition-all { /* transition: all 150ms ease at sm+ */ }
.sm\\:scale-105 { /* transform: scale(1.05) at sm+ */ }
.sm\\:fadein { /* animation: fadein 150ms linear at sm+ */ }
// ... all animation classes with sm: prefix

// Medium screens (≥768px)
.md\\:duration-300 { /* transition-duration: 300ms at md+ */ }
.md\\:rotate-45 { /* transform: rotate(45deg) at md+ */ }
.md\\:slidedown { /* animation: slidedown 150ms ease-out at md+ */ }
// ... all animation classes with md: prefix

// Large screens (≥992px)
.lg\\:transition-transform { /* transition: transform 150ms ease at lg+ */ }
.lg\\:scale-110 { /* transform: scale(1.1) at lg+ */ }
.lg\\:scalein-duration-300 { /* animation: scalein 300ms linear at lg+ */ }
// ... all animation classes with lg: prefix

// Extra large screens (≥1200px)
.xl\\:ease-in-out { /* transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) at xl+ */ }
.xl\\:translate-x-4 { /* transform: translateX(1.5rem) at xl+ */ }
.xl\\:fadeout-duration-500 { /* animation: fadeout 500ms linear at xl+ */ }
// ... all animation classes with xl: prefix

Usage Examples

Hover Effects

<div class="grid">
  <div class="col-12 md:col-4">
    <div class="p-4 surface-card border-round shadow-1 cursor-pointer transition-all duration-300 hover:shadow-4 hover:scale-105">
      <h3 class="m-0 mb-2">Hover Scale</h3>
      <p class="m-0 text-color-secondary">Card scales up on hover</p>
    </div>
  </div>
  
  <div class="col-12 md:col-4">
    <div class="p-4 surface-card border-round shadow-2 cursor-pointer transition-colors duration-200 hover:bg-primary hover:text-white">
      <h3 class="m-0 mb-2">Color Transition</h3>
      <p class="m-0 opacity-70">Background changes on hover</p>
    </div>
  </div>
  
  <div class="col-12 md:col-4">
    <div class="p-4 surface-card border-round shadow-1 cursor-pointer transition-transform duration-300 hover:-translate-y-2">
      <h3 class="m-0 mb-2">Lift Effect</h3>
      <p class="m-0 text-color-secondary">Card lifts up on hover</p>
    </div>
  </div>
</div>

Button Interactions

<div class="flex flex-wrap gap-3">
  <!-- Scale button -->
  <button class="px-4 py-2 bg-primary text-white border-none border-round cursor-pointer transition-transform duration-150 hover:scale-105 active:scale-95">
    Scale Button
  </button>
  
  <!-- Slide button -->
  <button class="px-4 py-2 bg-green-500 text-white border-none border-round cursor-pointer transition-all duration-200 hover:-translate-y-1 hover:shadow-3">
    Lift Button
  </button>
  
  <!-- Rotate button -->
  <button class="relative px-4 py-2 bg-blue-500 text-white border-none border-round cursor-pointer transition-all duration-300 hover:bg-blue-600 overflow-hidden">
    <span class="relative z-1">Rotate Icon</span>
    <i class="pi pi-refresh absolute right-0 top-0 w-full h-full flex align-items-center justify-content-center transition-transform duration-300 hover:rotate-180"></i>
  </button>
</div>

Loading Animations

<div class="flex align-items-center gap-4">
  <!-- Spinning loader -->
  <div class="w-3rem h-3rem border-3 border-primary border-right-transparent border-circle animate-spin"></div>
  
  <!-- Pulsing loader -->
  <div class="w-3rem h-3rem bg-primary border-circle animation-iteration-infinite" style="animation: pulse 2s ease-in-out infinite;"></div>
  
  <!-- Bouncing dots -->
  <div class="flex gap-1">
    <div class="w-0-5rem h-0-5rem bg-primary border-circle animation-iteration-infinite" style="animation: bounce 1.4s ease-in-out infinite; animation-delay: 0s;"></div>
    <div class="w-0-5rem h-0-5rem bg-primary border-circle animation-iteration-infinite" style="animation: bounce 1.4s ease-in-out infinite; animation-delay: 0.2s;"></div>
    <div class="w-0-5rem h-0-5rem bg-primary border-circle animation-iteration-infinite" style="animation: bounce 1.4s ease-in-out infinite; animation-delay: 0.4s;"></div>
  </div>
</div>

Modal Entrance Animations

<!-- Modal backdrop -->
<div class="fixed inset-0 bg-black-alpha-50 flex align-items-center justify-content-center z-5 fadein-duration-200">
  <!-- Modal content -->
  <div class="relative w-full max-w-30rem mx-3 bg-white border-round shadow-8 scalein-duration-300">
    <div class="p-6">
      <h2 class="m-0 mb-4 text-xl font-bold">Animated Modal</h2>
      <p class="m-0 mb-6 text-color-secondary">This modal appears with fade and scale animations.</p>
      
      <div class="flex gap-2 justify-content-end">
        <button class="px-4 py-2 border-1 border-surface-300 bg-transparent border-round transition-colors duration-150 hover:bg-surface-100">
          Cancel
        </button>
        <button class="px-4 py-2 bg-primary text-white border-none border-round transition-all duration-150 hover:bg-primary-600 hover:scale-105">
          Confirm
        </button>
      </div>
    </div>
  </div>
</div>

Slide-in Notifications

<div class="fixed top-0 right-0 m-4 z-5">
  <div class="p-4 bg-green-500 text-white border-round shadow-4 slideright-duration-300">
    <div class="flex align-items-center gap-2">
      <i class="pi pi-check-circle text-lg"></i>
      <div>
        <div class="font-semibold">Success!</div>
        <div class="text-sm opacity-90">Operation completed successfully.</div>
      </div>
    </div>
  </div>
</div>

Image Gallery with Transitions

<div class="grid">
  <div class="col-12 md:col-6 lg:col-4">
    <div class="relative overflow-hidden border-round cursor-pointer">
      <img src="gallery1.jpg" alt="Gallery image" class="w-full h-15rem object-cover transition-transform duration-500 hover:scale-110">
      <div class="absolute inset-0 bg-black-alpha-50 flex align-items-center justify-content-center opacity-0 transition-opacity duration-300 hover:opacity-100">
        <span class="text-white font-semibold">View Image</span>
      </div>
    </div>
  </div>
  
  <div class="col-12 md:col-6 lg:col-4">
    <div class="relative overflow-hidden border-round cursor-pointer">
      <img src="gallery2.jpg" alt="Gallery image" class="w-full h-15rem object-cover transition-all duration-300 hover:scale-105 hover:brightness-110">
      <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black-alpha-70 to-transparent translate-y-full transition-transform duration-300 hover:translate-y-0">
        <h3 className="m-0 text-white font-semibold">Image Title</h3>
        <p className="m-0 text-white-alpha-90 text-sm">Image description</p>
      </div>
    </div>
  </div>
</div>

Navigation Menu Animations

<nav class="p-4 bg-white shadow-1">
  <div class="flex align-items-center justify-content-between">
    <div class="text-xl font-bold text-primary">Brand</div>
    
    <div class="hidden md:flex gap-6">
      <a href="#" class="relative text-color no-underline py-2 transition-colors duration-200 hover:text-primary">
        Home
        <span class="absolute bottom-0 left-0 w-0 h-0-125rem bg-primary transition-all duration-300 hover:w-full"></span>
      </a>
      <a href="#" class="relative text-color no-underline py-2 transition-colors duration-200 hover:text-primary">
        About
        <span class="absolute bottom-0 left-0 w-0 h-0-125rem bg-primary transition-all duration-300 hover:w-full"></span>
      </a>
      <a href="#" class="relative text-color no-underline py-2 transition-colors duration-200 hover:text-primary">
        Contact
        <span class="absolute bottom-0 left-0 w-0 h-0-125rem bg-primary transition-all duration-300 hover:w-full"></span>
      </a>
    </div>
    
    <!-- Mobile menu button -->
    <button class="md:hidden w-3rem h-3rem flex align-items-center justify-content-center border-none bg-transparent cursor-pointer">
      <div class="flex flex-column gap-1">
        <span class="w-1-5rem h-0-125rem bg-color transition-transform duration-300"></span>
        <span class="w-1-5rem h-0-125rem bg-color transition-opacity duration-300"></span>
        <span class="w-1-5rem h-0-125rem bg-color transition-transform duration-300"></span>
      </div>
    </button>
  </div>
</nav>

Form Field Animations

<form class="p-4 surface-section border-round">
  <div class="mb-4">
    <div class="relative">
      <input 
        type="text" 
        class="w-full p-3 border-1 border-surface-300 border-round transition-all duration-200 focus:border-primary focus:shadow-2"
        placeholder="Enter your name"
      >
    </div>
  </div>
  
  <div class="mb-6">
    <div class="relative">
      <textarea 
        rows="4" 
        class="w-full p-3 border-1 border-surface-300 border-round transition-all duration-200 focus:border-primary focus:shadow-2 resize-none"
        placeholder="Enter your message"
      ></textarea>
    </div>
  </div>
  
  <button 
    type="submit" 
    class="px-6 py-3 bg-primary text-white border-none border-round cursor-pointer transition-all duration-200 hover:bg-primary-600 hover:-translate-y-1 hover:shadow-3 active:translate-y-0"
  >
    Submit Form
  </button>
</form>

Progress Indicators

<div class="p-4 surface-card border-round shadow-2">
  <h3 class="m-0 mb-4">Upload Progress</h3>
  
  <!-- Progress bar -->
  <div class="relative w-full h-0-5rem bg-surface-200 border-round overflow-hidden mb-3">
    <div class="absolute top-0 left-0 h-full bg-primary transition-all duration-500 ease-out" style="width: 65%;"></div>
  </div>
  
  <!-- Step indicators -->
  <div class="flex align-items-center justify-content-between">
    <div class="flex align-items-center gap-2">
      <div class="w-2rem h-2rem bg-primary text-white border-circle flex align-items-center justify-content-center text-sm font-bold transition-all duration-300 scale-100">
        ✓
      </div>
      <span class="text-sm text-primary font-medium">Upload</span>
    </div>
    
    <div class="flex align-items-center gap-2">
      <div class="w-2rem h-2rem bg-primary text-white border-circle flex align-items-center justify-content-center text-sm font-bold transition-all duration-300 scale-110 shadow-2">
        2
      </div>
      <span class="text-sm text-primary font-medium">Processing</span>
    </div>
    
    <div class="flex align-items-center gap-2">
      <div class="w-2rem h-2rem bg-surface-300 text-surface-600 border-circle flex align-items-center justify-content-center text-sm font-bold transition-all duration-300">
        3
      </div>
      <span class="text-sm text-surface-500">Complete</span>
    </div>
  </div>
</div>

Install with Tessl CLI

npx tessl i tessl/npm-primeflex

docs

animation-interaction.md

borders-effects.md

colors.md

flexbox.md

form-layout.md

grid-system.md

image.md

index.md

layout.md

list-style.md

misc.md

overflow.md

spacing.md

typography.md

user-select.md

zindex.md

tile.json