tessl/npm-polished

A lightweight toolset for writing styles in JavaScript with Sass-style helper functions and mixins.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Animation Functions

Name: tessl/npm-polished
Author: tessl

Predefined cubic-bezier timing functions for smooth, professional animations with support for multiple easing modes and mathematical curves.

Capabilities

Easing Functions

Functions that return CSS cubic-bezier timing functions for different animation phases.

/**
 * Returns easing function for ease-in animations (slow start, fast end)
 * @param mode - Easing mode ("quad", "cubic", "quart", "quint", "sine", "expo", "circ", "back")
 * @returns CSS cubic-bezier timing function string
 */
function easeIn(mode: string): string;

/**
 * Returns easing function for ease-out animations (fast start, slow end)
 * @param mode - Easing mode ("quad", "cubic", "quart", "quint", "sine", "expo", "circ", "back")
 * @returns CSS cubic-bezier timing function string
 */
function easeOut(mode: string): string;

/**
 * Returns easing function for ease-in-out animations (slow start and end, fast middle)
 * @param mode - Easing mode ("quad", "cubic", "quart", "quint", "sine", "expo", "circ", "back")
 * @returns CSS cubic-bezier timing function string
 */
function easeInOut(mode: string): string;

Available Easing Modes

Each easing function supports the following modes, each providing different mathematical curves:

quad: Quadratic easing (power of 2)
cubic: Cubic easing (power of 3)
quart: Quartic easing (power of 4)
quint: Quintic easing (power of 5)
sine: Sinusoidal easing (sine wave)
expo: Exponential easing (exponential curve)
circ: Circular easing (quarter circle)
back: Back easing (overshoots then settles)

Usage Examples

import { easeIn, easeOut, easeInOut } from "polished";

// Basic easing usage in CSS-in-JS
const fadeInAnimation = {
  opacity: 0,
  transition: `opacity 0.3s ${easeIn("quad")}`,
  "&.visible": {
    opacity: 1
  }
};

// Different easing modes for different effects
const buttonHover = {
  transform: "scale(1)",
  transition: `transform 0.2s ${easeOut("back")}`,  // Bouncy effect
  "&:hover": {
    transform: "scale(1.1)"
  }
};

// Complex animations with multiple properties
const slideInCard = {
  transform: "translateY(100px)",
  opacity: 0,
  transition: [
    `transform 0.6s ${easeOut("expo")}`,
    `opacity 0.4s ${easeOut("quad")}`
  ].join(", "),
  "&.animate-in": {
    transform: "translateY(0)",
    opacity: 1
  }
};

// Comparing different easing types
const easingExamples = {
  // Gentle, subtle animation
  gentle: {
    transition: `all 0.3s ${easeInOut("sine")}`
  },
  
  // Sharp, snappy animation
  snappy: {
    transition: `all 0.2s ${easeOut("quart")}`
  },
  
  // Bouncy, playful animation
  bouncy: {
    transition: `all 0.4s ${easeOut("back")}`
  },
  
  // Dramatic, attention-grabbing animation
  dramatic: {
    transition: `all 0.8s ${easeInOut("expo")}`
  }
};

Animation Patterns

Fade Animations

import { easeIn, easeOut, easeInOut } from "polished";

// Fade in from nothing
const fadeIn = {
  opacity: 0,
  transition: `opacity 0.3s ${easeOut("quad")}`,
  "&.visible": { opacity: 1 }
};

// Fade out to nothing
const fadeOut = {
  opacity: 1,
  transition: `opacity 0.2s ${easeIn("quad")}`,
  "&.hidden": { opacity: 0 }
};

// Cross-fade between states
const crossFade = {
  opacity: 0.5,
  transition: `opacity 0.4s ${easeInOut("sine")}`,
  "&.highlighted": { opacity: 1 },
  "&.dimmed": { opacity: 0.2 }
};

Movement Animations

import { easeOut, easeInOut } from "polished";

// Slide in from side
const slideInLeft = {
  transform: "translateX(-100%)",
  transition: `transform 0.5s ${easeOut("circ")}`,
  "&.slide-in": {
    transform: "translateX(0)"
  }
};

// Smooth scroll-triggered animations
const scrollReveal = {
  transform: "translateY(60px)",
  opacity: 0,
  transition: [
    `transform 0.8s ${easeOut("expo")}`,
    `opacity 0.6s ${easeOut("quad")}`
  ].join(", "),
  "&.revealed": {
    transform: "translateY(0)",
    opacity: 1
  }
};

Interactive Animations

import { easeOut, easeInOut } from "polished";

// Button press effect
const buttonPress = {
  transform: "scale(1)",
  transition: `transform 0.1s ${easeOut("quad")}`,
  "&:active": {
    transform: "scale(0.98)"
  }
};

// Hover grow effect
const hoverGrow = {
  transform: "scale(1)",
  transition: `transform 0.3s ${easeOut("back")}`,
  "&:hover": {
    transform: "scale(1.05)"
  }
};

// Modal entrance
const modalEntrance = {
  transform: "scale(0.8)",
  opacity: 0,
  transition: [
    `transform 0.3s ${easeOut("back")}`,
    `opacity 0.2s ${easeOut("quad")}`
  ].join(", "),
  "&.open": {
    transform: "scale(1)",
    opacity: 1
  }
};

Best Practices

Use easeOut for entrance animations (elements appearing)
Use easeIn for exit animations (elements disappearing)
Use easeInOut for state changes and hover effects
Gentle modes (sine, quad) for subtle, frequent animations
Sharp modes (quart, quint) for quick, responsive interactions
Special modes (back, expo, circ) for distinctive, attention-grabbing effects
Combine different easings for complex animations with multiple properties