Performant Animations Using KUTE.js: Part 5, Easing Functions and Attributes

So far in this series, you have learned how to animate the CSS properties of different elements, how to create different SVG-related animations, and how to animate the text content of different elements on a webpage. There is one more way in which you can animate the elements on a webpage using KUTE.js, and that is by changing the values of different attributes. This requires you to include the attributes plugin in your project.

In this tutorial, you will learn how to use the attributes plugin to animate the value of different kinds of attributes in KUTE.js. We will also discuss different easing functions that you can use to control the pace of different animations.

Easing Functions

Objects in real life very rarely move linearly. They are either accelerating or decelerating. Even the acceleration and deceleration occur at different magnitudes. Up to this point, all our animations have progressed linearly. This doesn't feel natural at all. In this section, you will learn about all the easing functions that KUTE.js provides for controlling the pace of different animations.

The core easing functions in the library are included in the core engine out of the box. Let's say you want to apply the QuadraticInOut easing to an animation. This can be achieved in two ways:

easing: KUTE.Easing.easingQuadraticInOut
// OR
easing: 'easingQuadraticInOut'

Each of the easing functions has a unique curve that determines how the elements will accelerate during the animation. A sinusoidal curve implies linear acceleration. Keep in mind that this is different from the linear easing function. The linear function implies a linear speed of animation, while a sinusoidal curve implies a linear speed of acceleration for the animation. In other words, the speed of the animation will increase or decrease linearly. Similarly, quadratic implies acceleration with a power of two, cubic implies a power of three, quartic implies a power of four, and quintic implies a power of five. There are also circular and exponential easing functions.

You can append In, Out, or InOut to any of the easing functions. The value In implies that the animation will start very slowly and keep accelerating until the end. The value Out implies that the animation will start at the maximum speed and then decelerate slowly until it comes to a halt at the end. The value InOut means that the animation will speed up at the beginning and slow down at the end.

You can also use bounce and elastic easing functions in your animations and append In, Out, or InOut to any of them. In the following demo, I have applied all these easing functions on different circles so that you can see how they affect the pace of the animation.

It is possible that none of the core easing functions provide the animation pace that you are looking for. In such cases, you can include the Cubic Bezier functions in your project from the experiments branch and start using those easing functions. 

Similarly, KUTE.js also provides some physics-based easing functions imported from the Dynamics.js library. You can read more about all these easing functions and how to properly use them on the easing function page of the library.

Animating Attributes

Attributes in SVG can accept numbers as well as strings as their value. The strings can be color values or numbers suffixed with a unit like px, em, or %. The names of the attributes themselves can also consist of two words joined by a hyphen. Keeping these differences in mind, KUTE.js provides us different methods that can be used to specify the values of different attributes.

var tween = KUTE.to('selector', {attr: {'r': 100}});
var tween = KUTE.to('selector', {attr: {'r': '10%'}});

var tween = KUTE.to('selector', {attr: {'stroke-width': 10}});
var tween = KUTE.to('selector', {attr: {strokeWidth: 10}});

As you can see, suffixed values need to be enclosed within quotes. Similarly, attributes which contain a hyphen in their name need to be enclosed inside quotes or specified in camelCase form.

Unitless Attributes

A lot of attributes accept unitless values. For example, the stroke-width of a path could be unitless. Similarly, you don't have to specify a unit for the r, cx, and cy attributes of a circle element. You can animate all these attributes from one value to another using the attributes plugin. 

Now that you know how to use different easing functions, you will be able to animate different attributes at different paces. Here is an example:

var radiusAnimation = KUTE.allTo(
  "circle",
  {
    attr: { r: 75 }
  },
  {
    repeat: 1,
    yoyo: true,
    offset: 1000,
    easing: 'easingCubicIn'
  }
);

var centerxAnimationA = KUTE.to(
  "#circle-a",
  {
    attr: { cx: 500 }
  },
  {
    repeat: 1,
    yoyo: true,
    easing: 'easingCubicInOut',
  }
);

var centerxAnimationB = KUTE.to(
  "#circle-b",
  {
    attr: { cx: 100 }
  },
  {
    repeat: 1,
    yoyo: true,
    easing: 'easingCubicInOut'
  }
);

var centeryAnimation = KUTE.allTo(
  "circle",
  {
    attr: { cy: 300 }
  },
  {
    repeat: 1,
    yoyo: true,
    offset: 1000,
    easing: 'easingCubicOut'
  }
);

The first tween animates the radius of both circles at once using the allTo() method we discussed in the first tutorial. If set to true, the yoyo attribute plays the animation in the reverse direction. 

The cx attribute of both the circles is animated individually. However, they are both triggered by the same button click. Finally, the cy attribute of both the circles is animated at once with an offset of 1000 milliseconds.

Color Attributes

Starting from version 1.5.7, the attribute plugin in KUTE.js also allows you to animate the fill, stroke, and stopColor attributes. You can use valid color names or hex values for the colors. You can also provide the color values in RGB or HSL format. 

One important thing that you have to keep in mind is that the animations will only seem to work if you are not setting the value of these properties in CSS. In the following demo, the fill color wouldn't have animated at all if I had added the following CSS in our demo.

rect {
    fill: brown;
}

The demo I created is very basic, but you can make it more interesting by applying transforms and using more colors.

Suffixed Attributes

A lot of SVG attributes like r and stroke-width can work with and without suffixes. For example, you can set the value of r to be a number like 10 or in terms of em units like 10em. There are some attributes like offset attribute for color stops that always require you to add a suffix. While specifying a value for suffixed attributes in KUTE.js, always make sure that you enclose the value within quotes.

In the following example, I have animated the offset value of the first stop in a gradient and the color of the second stop. Since offset requires a suffix, I have enclosed the value inside quotes.

var offsetAnimation = KUTE.allTo(
  ".stop1",
  {
    attr: { offset: '90%'}
  },
  {
    repeat: 1,
    offset: 1000,
    yoyo: true,
    easing: 'easingCubicIn'
  }
);

var colorAnimation = KUTE.allTo(
  ".stop2",
  {
    attr: { stopColor: 'black'}
  },
  {
    repeat: 1,
    offset: 1000,
    yoyo: true,
    easing: 'easingCubicIn'
  }
);

var scaleAnimation = KUTE.allTo(
  "circle",
  {
    svgTransform: { scale: 2}
  },
  {
    repeat: 1,
    offset: 1000,
    yoyo: true,
    easing: 'easingCubicIn'
  }
);

There are three different gradients in the demo, and each of these gradients has two color stops with the class names stop1 and stop2. I have also applied a scale transform using the svgTransform attribute, which we discussed in the third tutorial of the series.

Final Thoughts

In this tutorial, you learned about different easing functions available in KUTE.js and how you can use them to control the pace of your own animations. You also learned how to animate different kinds of attributes.

I have tried to cover all the important aspects of KUTE.js in this series. This should be enough to help you use KUTE.js confidently in your own projects. You can also read the documentation in order to learn more about the library. 

I would also recommend that you go through the source code and see how the library actually works. If you have any questions or tips related to this tutorial, feel free to share them in the comments.



from Envato Tuts+ Tutorials

Comments

Post a Comment

Popular posts from this blog

How to Build Self-Confidence: 10+ Steps to Improve Your Self-Esteem

Image
Do you have friends who can walk up to someone at a party and they’d instantly hit it off? These are the people who often get free drinks, invites to cool events, and make new friends whenever they go out. You can gain confidence in yourself and improve different aspects of your life. (Image source:  Envato Elements ) Meanwhile, there are people who feel anxious in almost every social encounter. Their first day on a job, a big company meeting, and even a housewarming party all make them feel vulnerable and unsure of themselves. Questions like the following often spring to mind during these events:  “ What will I say? ”  “Who do I talk to?” “ What will I do if there’s an awkward silence? ”  While social awkwardness is common, it’s not a lifetime thing. You can learn how to build self-confidence that doesn’t feel forced or unnatural. You can still be yourself and have the self-confidence to try new things, meet new people, and all the benefits that come with...
Read more

Best of 2020: Great Landing Pages for Design Inspiration (Showcase Examples)

Image
A great landing page design is crucial when it comes to announcing new products or services as well as the launch of your company. Great landing pages help visitors focus on a singular action. That makes them great for driving conversions and signups. Zimed is one of our best landing page design examples on Envato Elements. Nowadays, you don’t have to be a web design expert to create a landing page. There's no shortage of  quality landing page samples on various marketplaces so all you need to do is find the one you like, buy it, and set it up. That's why we've set up this landing page showcase. In today's post, we'll share our best landing page examples from Envato Elements and ThemeForest. Find Great Landing Page Design Examples on Envato Elements for 2020 Envato Elements is a great starting point when it comes to the best  landing page design . Envato Elements is a subscription-based marketplace with dozens of landing page templates. When you start bro...
Read more

18+ Best Free PowerPoint Puzzle Pieces Templates (Infographic PPT Slides)

Image
Many people are visual learners. The population of visual learners is why it helps to use visual infographics to explain an idea in your PowerPoint presentation.  One of the best examples is using a PowerPoint puzzle pieces template.  Each piece of the puzzle can fit together into a singular idea. Templates like the premium  PANDAWA  template have all the PowerPoint puzzle pieces you need to explain a complex idea. Using a PowerPoint puzzle pieces will help you explain concepts more clearly. You can quickly and easily change professionally designed PowerPoint puzzles to fit your needs. This round-up will show you some of the best free PowerPoint puzzle templates. You'll also see top PowerPoint puzzle pieces templates from Envato Elements, and more puzzle pieces templates from GraphicRiver. Download the Best PowerPoint Puzzle Templates From Envato Elements Later in this tutorial, you'll see free template options. But for now, let's focus on the bes...
Read more