Skip to content

Add new easing function generators: generateBack, generateElastic, generateSteps - #711

Open
0xTHAC0 wants to merge 1 commit into
tweenjs:mainfrom
0xTHAC0:add-new-easing-functions
Open

Add new easing function generators: generateBack, generateElastic, generateSteps#711
0xTHAC0 wants to merge 1 commit into
tweenjs:mainfrom
0xTHAC0:add-new-easing-functions

Conversation

@0xTHAC0

@0xTHAC0 0xTHAC0 commented Aug 16, 2026

Copy link
Copy Markdown

Summary

Adds three new configurable easing generators to complement the existing generatePow, as requested in #507:

  • generateBack(overshoot) — Back easing with custom overshoot (default 1.70158, matching the built-in Back). Higher values produce more dramatic overshoots.
  • generateElastic(amplitude, period) — Elastic easing with configurable amplitude (≥1) and period. Useful for springy animations where you need fine control over the bounce.
  • generateSteps(steps) — Discrete step easing that quantizes the animation into N steps. In variant jumps at the start of each interval, Out at the end, InOut combines both halves. Useful for sprite sheet animations and staircase effects.

All generators return EasingFunctionGroup (In/Out/InOut) and satisfy the standard edge-value contracts:

  • f(0) = 0
  • f(1) = 1
  • InOut(0.5) = 0.5

Changes

  • src/Easing.ts — added the three generator functions
  • src/tests.ts — added 7 test cases covering edge values, discrete step behavior, midpoint constraints, and generateBack parity with default Back
  • examples/03_graphs.html — added visual demos for the new generators

Usage

import { Easing } from '@tweenjs/tween.js'

// Back with stronger overshoot
const strongBack = Easing.generateBack(3)
tween.easing(strongBack.InOut)

// Elastic with more bounce
const springy = Easing.generateElastic(1.5, 0.4)
tween.easing(springy.Out)

// 4-step staircase
const steps = Easing.generateSteps(4)
tween.easing(steps.In)

Closes #507

…nerateSteps

Adds three new configurable easing generators to complement the existing
generatePow, as requested in tweenjs#507:

- generateBack(overshoot): Back easing with custom overshoot (default 1.70158)
- generateElastic(amplitude, period): Elastic easing with configurable
  amplitude and period
- generateSteps(steps): Discrete step easing for staircase animations

All generators return EasingFunctionGroup (In/Out/InOut) and satisfy the
standard edge-value contracts (f(0)=0, f(1)=1, InOut(0.5)=0.5).

Includes unit tests and updates the graphs example with visual demos.

Closes tweenjs#507

Co-Authored-By: Paperclip <noreply@paperclip.ing>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Help add new easing functions

1 participant