Render

Fun Web Animation Effects with KUTE.js — SitePoint

Render · 2017-09-04推荐 · 3174阅读 CET/4 198 CET/6 17 原文链接

Beyond CSS: Dynamic DOM Animation Libraries

KUTE.js Animation Library

My aim in this article is to introduce KUTE.js, an open-source, free and feature-rich JavaScript animation engine by thednp and dalisoft.

This is the second article in the series Beyond CSS: Dynamic DOM Animation Libraries. If you’d like to read more about how best to use animation on the web or when you could consider using a JavaScript animation library instead of CSS-only animation, the first article in the series, Animating the DOM with Anime.js, contains some useful tips and resources.

What Can You Do with KUTE.js?

KUTE.js makes available a core animation engine and a number of plugins to animate specific kinds of properties. This modular architecture helps to keep this library performant and highly flexible.

What You can Animate with the KUTE.js Core Engine

Just using the core engine alone, you can animate:

  • Opacity property

  • All 2D transform properties, except for matrix, double axis skew and double axis scale

  • All 3D transform properties except for matrix3d and rotate3d

  • The following box model properties: width, height, top and left

  • The color and backgroundColor properties

  • Scrolling animation, both on the window object and on any scrollable DOM element

What You Can Animate with the KUTE.js CSS Plugin

Using the CSS plugin the number of possibilities for animation go up. Here’s what you can do:

  • Animate all box model properties like margin, padding, borderWidth, etc.

  • Animate the borderRadius property

  • Animate text properties like fontSize, lineHeight, letterSpacing, wordSpacing, etc.

  • Animate color properties like borderColor and outlineColor

  • Animate the clip property, now deprecated in CSS.

  • Animate the backgroundPosition property.

What You Can Animate with the KUTE.js SVG Plugin

SVG (Scalable Vector Graphics) illustrations and icons are all over the web. This is not by chance. SVG graphics look great whatever the screen resolution, being written in a markup language makes them more accessible, and when properly optimized, can have a small filesize.

One awesome thing you can do with an SVG graphic is animating different parts of it, and KUTE.js offers a great plugin that lets you achieve sophisticated animations without much effort.

In particular, the SVG plugin of KUTE.js lets you :

  • Morph SVG paths

  • Animate the SVG stroke attribute

  • Animate SVG transforms in a reliable, cross-browser way

What You Can Animate with the KUTE.js Attributes Plugin

With the Attributes plugin, KUTE.js lets you animate any numeric presentation attribute, with or without a unit of measurement like px, em, etc. This plugin, in conjunction with the SVG plugin, makes possible the creation of some cool animations.

What You Can Animate with the KUTE.js Text Plugin

Extending KUTE.js with the Text plugin will let you animate text elements in two ways:

  • Increasing and decreasing the string representation of a number

  • Writing a string a character at a time.

Visit the dedicated page on the KUTE.js website for full details about its capabilities:

Using KUTE.js

It’s time to experiment with KUTE.js.

Including KUTE.js into Your Project

You can download KUTE.js from the Download button on the project’s website, from KUTE.js GitHub page, or even a CDN link.

You then include the kute.min.js file in your HTML document via a regular tag just before the closing tag.

You can also install KUTE.js using Bower and npm.

All the details about the installation process are on the KUTE.js installation page.

Simple One-property Animation with KUTE.js

KUTE.js uses two core methods:

  • .to() allows you to animate CSS properties on a single element from a given default value or from a computed value to a desired value. This method works best for simple scroll or show/hide animations, or when you don’t know the current value of the property you want to animate

  • With .fromTo() you can animate an element by defining starting and ending values. This method performs better than the previous one, mainly because KUTE.js doesn’t have to compute the starting values of your animation.

The syntax for .to() is:

KUTE.to(
  element,
  {propertyName:propertyValue}
).start();

The syntax for .fromTo() is:

KUTE.fromTo(
  element,
  {fromPropertyName:fromPropertyValue}, 
  {toPropertyName: toPropertyValue}
).start();

The syntax above creates a tween object, that is, a JavaScript object which stores data about the animation of a DOM element, e.g., definition of CSS properties, animation duration, animation delay, etc.

It’s important to point out that the animation is not triggered by default. Rather, to get the animation going, you need to call the .start() method on the tween object.

You can also stop, pause and resume animations using .stop(), .pause(), and .play().

Before starting, resuming or pausing an animation, you can check if the animation is currently active or not active using .playing and .paused respectively:

tween.playing;
tween.paused;

To get your feet wet, use .to() to animate just the opacity value of a star icon from its initial value, set in the stylesheet, to the value of zero. The element is selected using its class attribute. Here’s the relevant snippet:

`KUTE.to('.icon-star-dark', {opacity: 0}).start();`

See the Pen KUTE.js Animation of one property with .to() by SitePoint (@SitePoint) on CodePen.

To recreate the same animation using fromTo(), here’s the snippet you need:

KUTE.fromTo(
  '.icon-star-dark', //selector
  {opacity: 1}, //start value
  {opacity: 0}  //end value
).start();

See the Pen KUTE.js Animation of one property with .fromTo() by SitePoint (@SitePoint) on CodePen.

Animating More than One Property on the Same Object with KUTE.js

Here’s how you can animate more than one property on the same object. For this demo I am going to use .fromTo(), but you’re free to adapt the code using .to() by just removing the starting values from the code.

Here’s the syntax:

KUTE.fromTo(
  element,
  {
    fromPropertyName1:fromPropertyValue1,
    fromPropertyName2:fromPropertyValue2,
    fromPropertyName3:fromPropertyValue3
  }, 
  {
    toPropertyName1: toPropertyValue1,
    toPropertyName2: toPropertyValue2,
    toPropertyName3: toPropertyValue3
  }
).start();

Let’s say you’d like to animate an HTML element’s CSS transform properties together with its opacity. Here’s how you could do this with KUTE.js:

KUTE.fromTo('.icon-star-dark', {
  scale: 1.5, //start value 1
  rotate: 360, //start value 2
  opacity: 1 //start value 3
}, {
  scale: 0.3, //end value 1
  rotate: 0, //end value 2
  opacity: 0 //end value 3
}).start();

The code above scales the element from a value of 1.5 to a value of 0.3, rotates it from 360 degrees to 0 degrees, and hides it by changing its opacity value from a value of 1 to 0.

Adding Delay, Duration, and other Options to KUTE.js Tween Object

Having the ability to control when an animation starts, how long it lasts, how many times it runs, etc., are common requirements we expect from an animation library.

Using the snippet above, here’s how KUTE.js lets you add options to your tweens.

KUTE.fromTo('.icon-star-dark', {
  //from properties ... 
}, {
  //to properties ...
}, {
  //options
  transformOrigin: '30% 50%',
  duration: 500,
  easing: 'easeInElastic'
}).start();

As you can see, what you need to do is add a bunch of property value pairs inside curly braces. Above, I defined values for the transformOrigin (which by default is 50% on the x-axis and 50% on the y-axis), duration and easing properties on the element.

KUTE.js offers these and plenty more options for fine-tuning your animations.

Head over to the KUTE library’s website for a complete list of available options.

See the Pen KUTE.js animation of multiple properties with options by SitePoint (@SitePoint) on CodePen.

Applying the Same Animations to Multiple Elements at Once with KUTE.js

To animate more than one element in the same way all at one time you can avoid coding loops and let KUTE.js handle the task with its two handy methods: .allTo() and .allFromTo().

Here’s how you can make a bunch of HTML elements sparkle using the same animation on all of them in one single tween object:

//define the tween object
var sparklingStars = KUTE.allFromTo(stars, {
  opacity: 0.1, //start value 1
  scale: 0.1  //start value 2 
}, {
  opacity: 1, //end value 1
  scale: 1.2 //end value 2
}, {
  //options
  offset: 200,
  repeat: 4,
  yoyo: true 
});

//start the animation
sparklingStars.start();

See the Pen KUTE.js Animation of multiple elements by SitePoint (@SitePoint) on CodePen.

Regarding the code above, the following two points are worth noting:

  • When using .allTo() or .allFromTo(), offset allows you to stagger an animation as it applies to all elements in a collection. In other words, instead of having all elements animating at the same time, there will be a number of milliseconds’ delay in-between animations which increases with each element in the collection.

  • I’ve stored the tween object into a variable for later use. This technique is helpful when you need to work with a number of tweens for more complex animations. Let’s see this in action in the next section!

Chaining Multiple Tweens with KUTE.js

Being able to trigger a number of tweens one after the other without too much effort is a great plus of using a good JavaScript library for DOM animation.

KUTE.js lets you do just this with the .chain() method.

Here’s the syntax to chain three tweens:

`tween1.chain(tween2, tween3);`

Still using the sparkling stars code from the last demo, this is how you would chain two more tweens to it, i.e., the disappearance of the starred globe and the appearance of some text.

var sparklingStars = KUTE.allFromTo('.icon', {
 //rest of the code here
});

var disappearingBall = KUTE.fromTo('.ball', {
  //rest of the code here
});

var greetingText = KUTE.fromTo('.greeting', {
  //rest of the code here
});

//chaining takes place here
sparklingStars.chain(disappearingBall, greetingText).start();

See the Pen KUTE.js: Chaining Tweens by SitePoint (@SitePoint) on CodePen.

--ADVERTISEMENT--

Working with KUTE.js Plugins

As you might expect, adding plugins allows you to do more fun stuff with KUTE.js. The demo below uses the SVG, Text and Attributes plugins.

The syntax varies slightly for the Attributes plugin:

`var tween = KUTE.to(element, {attr: {property: value}});`

Here’s a demo where the circular path of an SVG graphic is morphed into a heart-shaped path on the same graphic. You can either inject the path straight into the tween object as a string (in quotes, e.g., ‘d=”M 360.759 250 …’), or add an id to the SVG path (``) and refer to the path in the tween object using its id value, which is what I’ve done in the code below.

var morphingBall = KUTE.fromTo('#ball', {
  path: '#ball',
  attr: {
    fill: 'rgba(21, 19, 121, 1)'
  },
  opacity: 0.5
}, {
  path: '#heartpath',
  attr: {
    fill: '#7c0e18'
  },
  opacity: 1
}, {
  easing: 'easingElasticIn',
  morphIndex: 12,
  duration: 3000
});

KUTE offers the morphIndex option, which helps determine the least possible distance travelled by the points in the second path during the morph animation. Setting the morphIndex value that best suits your animation takes some fiddling. Experiment with this KUTE utility demo set up by thednp, one of KUTE’s authors, for a better grasp of this option.

See the Pen KUTE.js plugins: SVG and text animation by SitePoint (@SitePoint) on CodePen.

The Text plugin works seamlessly with KUTE’s core engine. You can see it in action as the text animates in at the end of the demo. Here’s the skeleton of a tween using KUTE.js Text plugin:

var greetingText = KUTE.to('.greeting', {
  opacity: 1,
  scale: 1,
  text: 'Happy 2017 Folks!'
  //more properties
}, {
  easing: 'easingBounceIn',
  //more options
});

This plugin offers a quick way to animate writing text on the web. Use the number property to increment or decrease a number inside a string, and the text property to write a string one character at a time. This article’s demo shows the text property at work.

Conclusion

This article has introduced KUTE.js, a small but versatile and flexible JavaScript library for dynamic DOM animation.

KUTE.js offers a wide range of animation possibilities, full documentation, user-friendly syntax and comes to you completely free under the MIT license.

Why not have a play with KUTE.js and let me know what you think?

Maria Antonietta Perna

Meet the author

Maria Antonietta Perna

Maria Antonietta Perna is co-Editor of the HTML/CSS Channel at SitePoint and a front-end web developer. She enjoys tinkering with cool CSS standards and is curious about teaching approaches to front-end code. When not coding for the web or not writing for the web, she enjoys philosophy books, long walks and good food.

相关文章