wix / wix/interact

Named easings are exported but not documented

Open
#183 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
4
Forks
2
Avg merge
7h 25m
Merged PRs (30d)
26

Description

Describe the bug

@wix/motion exports a cssEasings object (a map of ~30 named easings to their cubic-bezier(…) values), but it is not documented, its keys are not exposed as a TypeScript type, and preset rule types use easing?: string rather than referencing a named-easing union. Consumers can only discover it by guessing the import exists.

// This works at runtime but is undocumented and untyped:
import { cssEasings } from '@wix/motion';

console.log(cssEasings);
// { linear: '...', ease: '...', easeInQuad: '...', easeOutCubic: '...', … }

// No exported type for the key set — have to derive it ourselves:
type CssEasingName = keyof typeof cssEasings;

// Preset easing fields accept these names but are typed as `string`:
const timing: EffectTiming = { easing: 'easeInQuad' }; // no autocomplete, no validation

To Reproduce

  1. Install @wix/motion@2.1.3
  2. Search the published README / API docs for "cssEasings" or "named easings" — no results
  3. Open node_modules/@wix/motion type declarations — no CssEasingName or equivalent union type is exported
  4. Try typing easing: '...' in a preset config — get string, no autocomplete for valid easing names
  5. Discover cssEasings only by browsing the package's runtime exports or source

Expected behavior

  • cssEasings is documented as a public export with its keys listed
  • A union type (e.g. CssEasingName) is exported so consumers can type easing parameters against the known set
  • Preset rule types for easing fields reference that union (or at minimum document that named easing strings from cssEasings are accepted)

Screenshots

N/A — this is a docs/types gap, not a visual bug.

Desktop

  • OS: macOS 15.4
  • @wix/motion: 2.1.3
  • @wix/motion-presets: 1.0.0
  • TypeScript: 5.x

Additional context

Any tool that builds an easing picker (dropdown, autocomplete, curve preview) needs the canonical set of named easings. Currently this requires guessing the undocumented export exists, then deriving the key set at runtime. There is no compile-time safety when passing easing names to preset configs. A workaround:

import { cssEasings } from '@wix/motion';

const NAMED_EASINGS = Object.keys(cssEasings).map(name => ({
  value: name,
  label: name.replace(/([a-z])([A-Z])/g, '$1 $2'),
}));

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Inspect the @wix/motion runtime exports, published README/API docs, and TypeScript declarations, then check the preset rule type definitions for easing fields. Document cssEasings and its keys, expose the named-easing type, and make the preset easing types reference it; done means consumers can find and autocomplete the supported names.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, typescript
Domain
api, documentation
Issue type
Documentation
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.