or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

actions.mdcompiler.mdcore-runtime.mdeasing-functions.mdindex.mdlist-animations.mdmotion-animation.mdstore-management.mdtransitions.md
tile.json

easing-functions.mddocs/

Easing Functions

Comprehensive collection of easing functions for smooth animation curves and natural motion effects.

Capabilities

Linear Easing

Constant rate of change with no acceleration or deceleration.

/**
 * Linear easing function with constant rate of change
 * @param t - Time parameter (0-1)
 * @returns Eased value (0-1)
 */
function linear(t: number): number;

Usage Examples:

import { linear } from "svelte/easing";
import { tweened } from "svelte/motion";

// Constant speed animation
const progress = tweened(0, {
  duration: 1000,
  easing: linear
});

// Perfect for progress bars and loading indicators
progress.set(100);

Quadratic Easing

Gentle acceleration/deceleration using quadratic curves.

/**
 * Quadratic ease in - starts slow, accelerates
 * @param t - Time parameter (0-1)
 * @returns Eased value (0-1)
 */
function quadIn(t: number): number;

/**
 * Quadratic ease out - starts fast, decelerates
 * @param t - Time parameter (0-1)
 * @returns Eased value (0-1)
 */
function quadOut(t: number): number;

/**
 * Quadratic ease in-out - accelerates then decelerates
 * @param t - Time parameter (0-1)
 * @returns Eased value (0-1)
 */
function quadInOut(t: number): number;

Usage Examples:

import { quadIn, quadOut, quadInOut } from "svelte/easing";

// Gentle acceleration
<div transition:fade={{ easing: quadIn }}>
  Fades in slowly then faster
</div>

// Gentle deceleration  
<div transition:slide={{ easing: quadOut }}>
  Slides fast then slows down
</div>

// Smooth in and out
<div transition:scale={{ easing: quadInOut }}>
  Smooth acceleration and deceleration
</div>

Cubic Easing

Moderate acceleration/deceleration using cubic curves.

/**
 * Cubic ease in - moderate acceleration
 * @param t - Time parameter (0-1)
 * @returns Eased value (0-1)
 */
function cubicIn(t: number): number;

/**
 * Cubic ease out - moderate deceleration
 * @param t - Time parameter (0-1)
 * @returns Eased value (0-1)
 */
function cubicOut(t: number): number;

/**
 * Cubic ease in-out - moderate acceleration then deceleration
 * @param t - Time parameter (0-1)
 * @returns Eased value (0-1)
 */
function cubicInOut(t: number): number;

Usage Examples:

import { cubicOut, cubicInOut } from "svelte/easing";

// Most commonly used - natural feeling
<div transition:fly={{ easing: cubicOut }}>
  Natural deceleration
</div>

// Smooth both ways
<div transition:blur={{ easing: cubicInOut }}>
  Balanced acceleration/deceleration
</div>

Quartic Easing

Strong acceleration/deceleration using quartic curves.

/**
 * Quartic ease in - strong acceleration
 * @param t - Time parameter (0-1)
 * @returns Eased value (0-1)
 */
function quartIn(t: number): number;

/**
 * Quartic ease out - strong deceleration
 * @param t - Time parameter (0-1)
 * @returns Eased value (0-1)
 */
function quartOut(t: number): number;

/**
 * Quartic ease in-out - strong acceleration then deceleration
 * @param t - Time parameter (0-1)
 * @returns Eased value (0-1)
 */
function quartInOut(t: number): number;

Quintic Easing

Very strong acceleration/deceleration using quintic curves.

/**
 * Quintic ease in - very strong acceleration
 * @param t - Time parameter (0-1)
 * @returns Eased value (0-1)
 */
function quintIn(t: number): number;

/**
 * Quintic ease out - very strong deceleration
 * @param t - Time parameter (0-1)
 * @returns Eased value (0-1)
 */
function quintOut(t: number): number;

/**
 * Quintic ease in-out - very strong acceleration then deceleration
 * @param t - Time parameter (0-1)
 * @returns Eased value (0-1)
 */
function quintInOut(t: number): number;

Sine Easing

Smooth, wave-like acceleration/deceleration using sine curves.

/**
 * Sine ease in - smooth acceleration
 * @param t - Time parameter (0-1)
 * @returns Eased value (0-1)
 */
function sineIn(t: number): number;

/**
 * Sine ease out - smooth deceleration
 * @param t - Time parameter (0-1)
 * @returns Eased value (0-1)
 */
function sineOut(t: number): number;

/**
 * Sine ease in-out - smooth acceleration then deceleration
 * @param t - Time parameter (0-1)
 * @returns Eased value (0-1)
 */
function sineInOut(t: number): number;

Usage Examples:

import { sineInOut } from "svelte/easing";

// Very smooth, organic feeling
<div transition:scale={{ easing: sineInOut }}>
  Organic, wave-like motion
</div>

Exponential Easing

Dramatic acceleration/deceleration using exponential curves.

/**
 * Exponential ease in - dramatic acceleration
 * @param t - Time parameter (0-1)
 * @returns Eased value (0-1)
 */
function expoIn(t: number): number;

/**
 * Exponential ease out - dramatic deceleration
 * @param t - Time parameter (0-1)
 * @returns Eased value (0-1)
 */
function expoOut(t: number): number;

/**
 * Exponential ease in-out - dramatic acceleration then deceleration
 * @param t - Time parameter (0-1)
 * @returns Eased value (0-1)
 */
function expoInOut(t: number): number;

Usage Examples:

import { expoOut } from "svelte/easing";

// Dramatic effects, great for reveals
<div transition:fly={{ easing: expoOut }}>
  Dramatic deceleration
</div>

Circular Easing

Smooth circular arc acceleration/deceleration.

/**
 * Circular ease in - circular arc acceleration
 * @param t - Time parameter (0-1)
 * @returns Eased value (0-1)
 */
function circIn(t: number): number;

/**
 * Circular ease out - circular arc deceleration
 * @param t - Time parameter (0-1)
 * @returns Eased value (0-1)
 */
function circOut(t: number): number;

/**
 * Circular ease in-out - circular arc acceleration then deceleration
 * @param t - Time parameter (0-1)
 * @returns Eased value (0-1)
 */
function circInOut(t: number): number;

Back Easing

Overshoot effects that go slightly beyond the target before settling.

/**
 * Back ease in - slight reverse before acceleration
 * @param t - Time parameter (0-1)
 * @returns Eased value (0-1)
 */
function backIn(t: number): number;

/**
 * Back ease out - overshoot then settle back
 * @param t - Time parameter (0-1)
 * @returns Eased value (0-1)
 */
function backOut(t: number): number;

/**
 * Back ease in-out - reverse, accelerate, overshoot, settle
 * @param t - Time parameter (0-1)
 * @returns Eased value (0-1)
 */
function backInOut(t: number): number;

Usage Examples:

import { backOut } from "svelte/easing";

// Great for UI elements that "pop" into place
<div transition:scale={{ easing: backOut }}>
  Scales with slight overshoot
</div>

// Perfect for button press effects
<button on:click={handleClick} transition:scale={{ easing: backOut, duration: 150 }}>
  Click me
</button>

Elastic Easing

Spring-like oscillating effects that settle over time.

/**
 * Elastic ease in - oscillating acceleration
 * @param t - Time parameter (0-1)
 * @returns Eased value (0-1)
 */
function elasticIn(t: number): number;

/**
 * Elastic ease out - oscillating deceleration
 * @param t - Time parameter (0-1)
 * @returns Eased value (0-1)
 */
function elasticOut(t: number): number;

/**
 * Elastic ease in-out - oscillating acceleration then deceleration
 * @param t - Time parameter (0-1)
 * @returns Eased value (0-1)
 */
function elasticInOut(t: number): number;

Usage Examples:

import { elasticOut } from "svelte/easing";

// Bouncy, playful animations
<div transition:fly={{ easing: elasticOut }}>
  Flies in with elastic bounce
</div>

// Great for notifications or alerts
<div class="notification" transition:scale={{ easing: elasticOut }}>
  Bouncy notification
</div>

Bounce Easing

Ball-like bouncing effects that simulate physical bouncing.

/**
 * Bounce ease in - bouncing acceleration
 * @param t - Time parameter (0-1)
 * @returns Eased value (0-1)
 */
function bounceIn(t: number): number;

/**
 * Bounce ease out - bouncing deceleration
 * @param t - Time parameter (0-1)
 * @returns Eased value (0-1)
 */
function bounceOut(t: number): number;

/**
 * Bounce ease in-out - bouncing acceleration then deceleration
 * @param t - Time parameter (0-1)
 * @returns Eased value (0-1)
 */
function bounceInOut(t: number): number;

Usage Examples:

import { bounceOut } from "svelte/easing";

// Physical bouncing effects
<div transition:fly={{ y: -100, easing: bounceOut }}>
  Drops and bounces
</div>

// Playful UI interactions
<div class="ball" transition:scale={{ easing: bounceOut }}>
  Bouncing ball effect
</div>

Easing Function Selection Guide

Common Use Cases

UI Transitions (buttons, modals, dropdowns):

  • cubicOut - Most natural feeling
  • backOut - Subtle overshoot for emphasis
  • quadOut - Gentle, smooth

Dramatic Reveals:

  • expoOut - Dramatic slowdown
  • elasticOut - Bouncy reveal
  • bounceOut - Playful bounce

Loading Animations:

  • linear - Consistent progress
  • sineInOut - Smooth wave-like
  • quadInOut - Gentle acceleration/deceleration

Page Transitions:

  • cubicInOut - Balanced feel
  • quintOut - Strong deceleration
  • circInOut - Smooth arcs

Performance Considerations

import { cubicOut } from "svelte/easing";

// Prefer CSS-based transitions for better performance
const fastTransition = {
  duration: 200,
  easing: cubicOut
};

// Use tick callback sparingly for complex effects
const complexTransition = {
  duration: 1000,
  easing: elasticOut,
  tick: (t, u) => {
    // Custom animation logic
    node.style.transform = `scale(${t}) rotate(${u * 360}deg)`;
  }
};

Custom Easing Functions

Create your own easing functions for specialized effects:

// Custom ease function
function customEase(t) {
  // Create custom curve - must return 0-1 for input 0-1
  return t * t * (3 - 2 * t); // Smoothstep
}

// Stepped easing
function steps(count) {
  return (t) => Math.floor(t * count) / count;
}

// Usage
<div transition:fade={{ easing: customEase }}>
  Custom eased fade
</div>

<div transition:scale={{ easing: steps(5) }}>
  5-step discrete scaling
</div>