Skip to content
master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

KUTE.js

A modern JavaScript animation engine built on ES6+ standards with most essential features for the web, delivering easy to use methods to set up high performance, cross-browser animations. The focus is code quality, flexibility, performance and size.

NPM Version NPM Downloads jsDeliver CDNJS

KUTE.js packs a series of components for presentation attributes, SVG transform, draw SVG strokes and path morphing, text string write up or number countdowns, plus additional CSS properties like colors, border-radius or typographic properties.

For components documentation, examples and other cool tips, check the demo.

Components

KUTE.js includes 18 components, but not all of them are bundled with the default distribution package:

  • backgroundPosition - enables the animation for the backgroundPosition CSS property
  • borderRadius - enables the animation for all the borderRadius properties
  • boxModel - enables the animation for the boxModel properties like top , left, width, etc
  • clipProperty - enables the animation for the clip property
  • colorProperties - enables the animation for the color properties like color, backgroundColor
  • filterEffects - enables the animation for the filter property
  • htmlAttributes - enables the animation for any numeric as well as some color based HTML Attributes
  • opacityProperty - enables the animation for the opacity property
  • scrollProperty - enables the animation for the window/Element scrollTop Object property
  • shadowProperties - enables the animation for the shadowProperties properties: textShadow & boxShadow
  • svgCubicMorph - enables the animation for the d Presentation Attribute of the <path> SVGElement targets; this implements some Raphael.js functionality
  • svgMorph - enables the animation for the d Presentation Attribute of the <path> SVGElement targets; this component implements some D3.js and flubber functionality
  • svgDraw - enables the animation for the strokeDasharray and strokeDashoffset CSS properties specific to <path> SVGElement
  • svgTransform - enables the animation for the transform presentation attribute
  • textProperties - enables the animation for numeric HTMLTextElement related CSS properties like fontSize or letterSpacing
  • textWrite - enables the animation for the content of various strings
  • transformFunctions - enables the animation for the transform CSS3 property, the default component bundled with the official build
  • transformLegacy - enables the animation for the transform CSS3 property on legacy browsers IE9+, not included with the official build, but can be used in your custom builds
  • transformMatrix - enables the animation for the transform CSS3 property; this component implements DOMMatrix() API and is super light

All above mentioned components have a BASE version which doesn't include value processing, and their purpose is to provide a way to ship your super light version of your application.

Wiki

For a complete developer guide, usage and stuff like npm, visit the wiki.

ESLint

If you include KUTE.js in your project, we recommend using the following ESLint rule:

rules: {
  // Disable bitwise for isArcCommand & isPathCommand from SVGPathCommander
  // as well as the KUTE.js interpolation functions 
  "no-bitwise": 0,
}

Some SVGPathCommander as well as KUTE.js interpolation functions make use of | (OR) and >> operators for fastest number operations.

Browser Support

KUTE.js is redeveloped for maximum performance on modern browsers. Some legacy browsers might some help, so give them a small polyfill set with most essential features required by KUTE.js to work, powered by minifill, try it. For broader projects you might want to consider polyfills.

Special Thanks

Contributions

License

MIT License