Add an "Ease out" option to the animation

user_609630 0
Viewed 155

I'm using this JS animated counter. At the moment there only seems to be two options for the animation - "linear" or "swing".

There seems to be very little JS defining this so it feels like I'm missing something. How can I make it ease out instead of using linear or swing?

From what I can tell this is the block that controls the easing:

function doCount(num, index, speed, groupClass, direction, easing) {
    let className = groupClass + ' ' + counterClass + '.' + 'c_' + index;
    if(easing == undefined) easing = "swing";
    $(className).animate({
        num
    }, {
        duration: +speed,
        easing: easing,
        step: function (now) {
            if (direction == 'reverse') {
                $(this).text(num - Math.floor(now));
            } else {
                $(this).text(Math.floor(now));
            }
        },
        complete: doCount
    });
}

The variable easing is just calling in the data attribute which is either set to linear by default or swing.

I've tried just adding "easeOut" but no luck with that hit and hope!!

jquery javascript
2 Answers

As highlighted in the comments above, jQuery by itself only supports two types of easing functions, linear and swing. This is outlined here in the jQuery documentation, which also points out that you can add additional easing functions by including jQuery UI in your project, this could be done by including the jQuery UI CDN in addition to the standard jQuery library:

<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js" integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0=" crossorigin="anonymous"></script>

Once you've included jQuery UI, you can use the easing functions it provides. There are a number of easing functions you can use, and you can find a list of each easing function and its implementation by logging the $.easing object. A list is also included in the docs:

linear, swing, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInExpo, easeOutExpo, easeInOutExpo, easeInSine, easeOutSine, easeInOutSine, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce

You can then use one of these easing functions for your counter, eg:

<div class="counter" data-TargetNum="5" data-Speed="5000" data-Easing="easeOutQuad"></div>

See example below:

<!-- Include jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Include jQueryUI -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js" integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0=" crossorigin="anonymous"></script>
<!-- Include js-animated-counter (note: you should download and include the file locally rather than using this link) -->
<script src="https://pablog1.github.io/js-animated-counter/multi-animated-counter.js"></script>

<div id="counters_1">
  <h3>Linear:</h3>
  <div class="counter" data-TargetNum="5" data-Speed="5000" 
  data-Easing="linear"></div>
  <h3>Swing:</h3>
  <div class="counter" data-TargetNum="5" data-Speed="5000" 
  data-Easing="swing"></div>
  <h3>easeOutQuad:</h3>
  <div class="counter" data-TargetNum="5" data-Speed="5000" 
  data-Easing="easeOutQuad"></div>
</div>

Note that you don't need to include the entire jQuery UI library in your project and can instead select just the Effects core component for just the easing functions, which you can do on their download page here.

user_56489540

The standard library only supports 2 options, swing and linear.
But jquery UI library supports many options for easing attribute. You can choose the below one.
easeOutExpo, easeOutQuint, easeOutQuart, easeOutCubic, easeOutQuad ...
Don't forget to import jquery-ui script.

<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

You can check more options here with examples.
https://api.jqueryui.com/easings/

user_197302360
Related