Skip to content

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

Merged
trusktr merged 1 commit into
tweenjs:easing-function-generatorsfrom
0xTHAC0:add-new-easing-functions
Sep 19, 2026
Merged

trusktr merged 1 commit into
tweenjs:easing-function-generatorsfrom
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>
@trusktr

trusktr commented Sep 13, 2026

Copy link
Copy Markdown
Member

Nice ideas! Taking a look.

trusktr added a commit that referenced this pull request Sep 19, 2026
@trusktr
trusktr changed the base branch from main to easing-function-generators September 19, 2026 00:48
@trusktr
trusktr merged commit e56e1ba into tweenjs:easing-function-generators Sep 19, 2026
1 check failed
@trusktr

trusktr commented Sep 19, 2026

Copy link
Copy Markdown
Member

Merged into the easing-function-generators branch. Will iterate there to add tests/examples. Feel free to pull request to that branch if any more ideas!

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

2 participants