Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.sitepoint.com/fun-web-animation-effects-with-kute-js/ below:

Fun Web Animation Effects with KUTE.js — SitePoint

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.

• KUTE.js is an open-source, free, and feature-rich JavaScript animation engine that offers a wide range of animation possibilities with user-friendly syntax.
• KUTE.js has a modular architecture that keeps the library performant and highly flexible. It supports a wide range of CSS properties, SVGs, and other HTML5 features.
• KUTE.js allows developers to animate specific kinds of properties using its core engine and plugins. It also supports tweening for smooth transitions between different states and offers various methods to control the animation process.
• KUTE.js is designed to work seamlessly with other JavaScript libraries and frameworks, making it a reliable choice for complex projects. It is fully compatible with mobile web development and supports touch events.

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.

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

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.

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

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.

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:

It’s time to experiment with KUTE.js.

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 <script> tag just before the closing </body> 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.

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', 
  {opacity: 1}, 
  {opacity: 0}  
).start();

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

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, 
  rotate: 360, 
  opacity: 1 
}, {
  scale: 0.3, 
  rotate: 0, 
  opacity: 0 
}).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.

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', {
  
}, {
  
}, {
  
  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.

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:

var sparklingStars = KUTE.allFromTo(stars, {
  opacity: 0.1, 
  scale: 0.1  
}, {
  opacity: 1, 
  scale: 1.2 
}, {
  
  offset: 200,
  repeat: 4,
  yoyo: true
});

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!

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', {
 
});
var disappearingBall = KUTE.fromTo('.ball', {
  
});
var greetingText = KUTE.fromTo('.greeting', {
  
});

sparklingStars.chain(disappearingBall, greetingText).start();

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

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 (<path id="ball" d="M 360.759 250 ... />) 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!'
  
}, {
  easing: 'easingBounceIn',
  
});

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.

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?

KUTE.js stands out from other JavaScript animation libraries due to its performance and versatility. It is a modern, powerful, and flexible JavaScript animation engine that allows developers to create complex animations with ease. Unlike other libraries, KUTE.js supports a wide range of CSS properties, SVGs, and other HTML5 features. It also has a modular design, which means you can import only the features you need, reducing the overall size of your scripts.

To start using KUTE.js, you need to download the library from the official GitHub repository. Once downloaded, you can include it in your project by linking the necessary JavaScript files in your HTML. You can then use the KUTE.js API to create animations. The API is intuitive and easy to use, even for beginners.

Yes, KUTE.js is designed to work seamlessly with other JavaScript libraries and frameworks. It does not interfere with the operation of other scripts, making it a reliable choice for complex projects. Whether you’re using jQuery, React, Angular, or Vue.js, you can integrate KUTE.js without any issues.

With KUTE.js, you can create a wide variety of animations. This includes simple animations like fades and slides, as well as more complex animations involving 3D transforms, SVG morphing, and scrolling effects. The library also supports tweening, which allows you to create smooth transitions between different states.

KUTE.js is designed for performance, but there are several things you can do to ensure your animations run smoothly. First, try to minimize the number of simultaneous animations. Too many animations can overwhelm the browser and cause lag. Second, use the requestAnimationFrame method for your animation loops. This method is optimized for animations and ensures they run at the optimal frame rate.

Yes, KUTE.js is fully compatible with mobile web development. The library is lightweight and efficient, ensuring your animations run smoothly even on less powerful devices. It also supports touch events, making it easy to create interactive animations for mobile users.

Debugging KUTE.js animations is straightforward. The library provides detailed error messages that can help you identify and fix issues. You can also use the browser’s developer tools to inspect your animations and see how they’re working.

Yes, KUTE.js is an open-source project, and contributions are welcome. If you have a feature request, bug report, or want to contribute code, you can do so through the official GitHub repository.

The official KUTE.js GitHub repository is a great resource for learning more about the library. It includes detailed documentation, examples, and a community of developers who can help answer your questions.

While KUTE.js is a powerful tool, it’s also beginner-friendly. The API is intuitive and easy to use, and the documentation provides clear explanations and examples. Whether you’re a seasoned developer or just starting out, KUTE.js can help you create stunning web animations.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4