This demonstrates KUTE.js's core engine, and CSS, SVG, Attribute plugins through simulating a portfolio website.
The website is divided into 3 pages: introduction, project, detailed project.
The introduction page shows how each letter can be animated by using opacity, scale, and text properties. The chain method is used to connect color animation.
The project page shows how elements can be transformed through use of translate property, rotate property, and size.
The detailed project shows example of SVG path animation, scale animation, clip property animation, plus translate and opacity animation.
The easing functions has been applied to all movements. This provides unique curve that adds natural pace.
KUTE.js is a native JavaScript animation engine, delivering easy to use methods to set up high performance, cross-browser animations.
Along with a simple jQuery plugin, KUTE.js packs plugins 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.
- Open terminal/command
- Choose file directory
- Run
$ npm install --save kute.js
- Make sure the library is installed in same folder as your main files
- Refer to correct library directory on HTML files via
scripttag