Timing properties for animation effects used in Web Animations API.
npm install waapi-timing-properties





List of timing properties and their possible values for animation effects used in Web Animations API.
It can be used to validate() and sanitize() options passed to Element.animate(), KeyframeEffectReadOnly() and KeyframeEffect(). Here's an example.
DEMO and its source code.
```
$ yarn add waapi-timing-properties
or
``
$ npm install waapi-timing-properties
Import all functionality into one object:
`javascript`
import * as WTProperties from 'waapi-timing-properties'
Or import only what you need:
`javascript`
import { properties, propertiesNames, sanitize, validate } from 'waapi-timing-properties'
Or load from CDN:
`html`
WTProperties.properties is an object containing properties names and their possible values.
The structure of the object is this:
`javascript`
WTProperties.propertiesNames.forEach((property) => {
const object = WTProperties.properties[property]
})
object.default is the default value of the property.
object.type is either 'Number' or 'String'.
If object.type === 'Number' then
object.min is its minimal possible value
object.max is its maximal possible value
If object.type === 'String' then
object.values is an array of possible values.
For easing property there is also
object.valuesCubicBezier object which contains cubic-bezier equivalents of linear, ease, ease-in, ease-out and ease-in-out
and
object.valuesSteps object which contains steps equivalents of step-start and step-end
WTProperties.propertiesNames is an array containing only properties names.
WTProperties.sanitize has two optional arguments:
WTProperties.sanitize(objectArrayOrStringToCheck, checkValues = true, returnDefault = true)
WTProperties.validate also has two optional arguments:
WTProperties.validate(objectArrayOrStringToCheck, checkValues = true, returnFirstInvalidProperty = false)
Let's sanitize and validate some options:
`javascript`
const options = {
duration: -1000,
easing: 'not easy',
iterations: 3,
someInvalidOption: 123,
}
Use WTProperties.sanitize(options) to remove properties with invalid names and replace properties with valid names but invalid values with their default values:
`javascript`
WTProperties.sanitize(options) ===
{
duration: 0,
easing: 'linear',
iterations: 3,
}
WTProperties.validate(options) === true
Use sanitize(options, true, false) to remove all properties with invalid names and/or values:
`javascript`
WTProperties.sanitize(options, true, false) ===
{
iterations: 3,
}
WTProperties.validate(options) === true
Use sanitize(options, false) to remove only properties with invalid names without checking their values:
`javascript`
WTProperties.sanitize(options, false) ===
{
duration: -1000,
easing: 'not easy',
iterations: 3,
}
WTProperties.validate(options) === false
WTProperties.validate(options, false) === true
Set the third argument of validate() - returnFirstInvalidProperty to true to return string containing first invalid property instead of boolean when the result is false:
This can be useful for writing tests. Here's an example.
`javascript`
const options = {
duration: -1000,
easing: 'not easy',
iterations: 3,
someInvalidOption: 123,
}
WTProperties.validate(options) === false
WTProperties.validate(options, true, true) === 'duration: -1000'
WTProperties.validate(options, false) === false
WTProperties.validate(options, false, true) === 'someInvalidOption: 123'
options can be array of properties names to check or a string (a single property name). In this case the optional arguments have no effect.
Play with the DEMO for better understanding of how it works.
Here's the list of all the properties with their possible values and defaults:
- #### id
Possible values:
- Any string
Default:
- No default value
- #### direction
Possible values:
- normalreverse
- alternate
- alternate-reverse
-
Default:
- normal
- #### duration
Possible values:
- Any positive number or 0
Default:
- 0
- #### easing
Possible values:
- linearease
- ease-in
- ease-out
- ease-in-out
- cubic-bezier(x1, y1, x2, y2)
- where x1 and x2 are numbers between 0 and 1, y1 and y2 are any numbersstep-start
- step-end
- steps(number_of_steps[, direction])
- where number_of_steps is an integer greater than 0 and optional direction is one of end, start, jump-both, jump-none, jump-end, jump-start
Default:
- linear
- #### endDelay
Possible values:
- Any positive number or 0
Default:
- 0
- #### fill
Possible values:
- noneforwards
- backwards
- both
- auto
-
Default:
- auto
- #### iterationStart
Possible values:
- Any positive number or 0
Default:
- 0
- #### iterations
Possible values:
- Any positive number or 0 or Infinity
Default:
- 1
- #### composite
Possible values:
- addaccumulate
- replace
- auto
-
Default:
- replace
- #### iterationComposite
Possible values:
- accumulatereplace
-
Default:
- replace
Build the bundle for browsers into ./dist folder:
``
yarn build
Rebuild the bundle when its source files change on disk:
`shell script`
yarn watch
Run tests:
``
yarn test
Lint:
`shell script`
yarn lint
Fix linting and style errors:
`shell script`
yarn fix
Update dependencies:
`shell script`
yarn up
Generate changelog based on commit messages:
`shell script``
yarn c
To use the above command conventional-changelog-cli must be installed globally. Follow the recommended workflow.