I've used the jQuery prop-method with the counter-property to create an animation that counts from 0 to the value from the .count-string through an each-loop.
This works as intended, but I would like to increase this value by 3, 2 and 1 respectively, set by the variables cowsIncrement, sheepIncrement and pigsIncrement. Each increment has to happen in 3, 2 and 1-second intervals as well (similiar to the increment value), and it has to run infinitely with the same animation. How would I go about doing this?
Can somebody provide solution from jQuery/Vanilla Js?
// #count1
let cowsIncrement = 3;
// #count2
let sheepIncrement = 2;
// #count3
let pigsIncrement = 1;
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 1500,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now).toLocaleString('de-DE'));
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="count" id="count1">3000</div><span>cows</span>
<div class="count" id="count2">2000</div><span>sheep</span>
<div class="count" id="count3">1000</div><span>pigs</span>
Use an object that maps element IDs to the corresponding increments. Then use a complete: function that starts repeated animations with 3-second durations and the appropriate increment.
The key to getting the animations to repeat at the end is to use a named function, so it can call itself in the complete: option.
// #count1
let cowsIncrement = 3;
// #count2
let sheepIncrement = 2;
// #count3
let pigsIncrement = 1;
const increments = {
count1: cowsIncrement,
count2: sheepIncrement,
count3: pigsIncrement
};
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 1500,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now).toLocaleString('de-DE'));
},
complete: repeatAnimation
});
});
function repeatAnimation() {
let increment = increments[this.id];
let current = Number($(this).prop('Counter'));
console.log(this.id, current, increment);
$(this).animate({
Counter: current + increment
}, {
duration: 3000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now).toLocaleString('de-DE'));
},
complete: repeatAnimation
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="count" id="count1">3000</div><span>cows</span>
<div class="count" id="count2">2000</div><span>sheep</span>
<div class="count" id="count3">1000</div><span>pigs</span>
Related
I want to create a animated number counter using alpine js something exactly like this if there is a plugins or something can help me please told me.
Code :
<div id="counter">Counter: <b counter="0">0</b></div>
function update_users_count() {
$('#counter b').animate({
counter: 25000
}, {
duration: 6000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
},
complete: update_users_count
});
};
update_users_count();
Alpine.JS
Error code is : Uncaught ReferenceError: counterA is not defined
<script>
function counterExample() {
return {
counterA: 0,
target: '+100',
time: 2000,
init() {
const start = counterA;
const steps = time / (target - start);
const handle = setInterval(() => {
if (counterA < target) {
counterA += Math.round((target - start) / steps);
} else {
clearInterval(handle);
counterA = target;
}
}, time / steps);
}
}
}
</script>
Example of what I want to do :
<!DOCTYPE html>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.x.x/dist/alpine.min.js" defer></script><html>
<body>
<div x-data="{ current: 0, target: 1000, time: 300}" x-init="() => {
start = current;
const interval = Math.max(time / (target - start), 5);
const step = (target - start) / (time / interval);
const handle = setInterval(() => {
if(current < target)
current += step
else {
clearInterval(handle);
current = target
}
}, interval)
}">
<div class="card"x-text="Math.round(current)">
</div>
</body>
</html>
Good morning all,
I have an animated number counter that counts up from 0 to the specified number. However if I enter a decimal number (i.e. 99.99%) it rounds up to 100%. Is there a way to make it count up to the number that is given?
Please let me know if you need more information.
Thanks in advance!
numbersAnimate(_Panel) {
if (!_Panel) {
return;
}
// Get document language
const _Document = document.documentElement;
let lang = _Document.getAttribute('lang');
// Grab all panel amount nodes
const _PanelAmounts = _Panel.querySelectorAll('.panel__amount');
if (!_PanelAmounts) {
return;
}
//Loop over all the panel amounts
for (const _PanelAmount of _PanelAmounts) {
//Convert to jQuery object
const $PanelAmount = $(_PanelAmount);
//Panel amount stored in value
const value = $PanelAmount.data('amount');
//If there is no value return
if (!value || value.length < 1) {
return;
}
// If not a number return
if (isNaN(value)) {
return;
}
//Animation....
$PanelAmount.prop('Counter', 0).animate({
Counter: value
}, {
duration: 1000,
easing: 'linear',
step: function(now) {
$PanelAmount.text(this.Counter.toFixed());
}
});
}
//Add animated class because scroll event checks if it's there, if it isn't then add it.
_Panel.classList.add('animated');
//JSON Structure
"statistic": {
"amount": "99.99",
"symbol": "%"
},
<span className="panel__amount panel-text-style-c" data-amount={jsonData.statistic.amount}>0</span>
You are using Math.ceil(now) which will round to the nearest integer. Have you tried removing it?
$PanelAmount.text(now).toLocaleString(lang);
Old:
//Panel amount is the animated number
$PanelAmount.prop('Counter', 0).animate({
Counter: value
}, {
duration: 1000,
easing: 'linear',
step: function(now) {
$PanelAmount.text(Math.ceil(now)).toLocaleString(lang);
}
});
New:
function startCounter(){
$('.PanelAmount').each(function (index) {
var size = $(this).text().split(".")[1] ? $(this).text().split(".")[1].length : 0;
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 2000,
easing: 'swing',
step: function (now) {
$(this).text(parseFloat(now).toFixed(size));
}
});
});
}
startCounter();
.PanelAmount {
font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="counter">99.99</div>
New JQuery works to the exact decimal point
I am working on an animation to show this kind of effect using animejs, I have been able to show push the text after 1000ms each and change the opercity to 0.5. But its not in sync like the one in this gif what can I do to add make the effect effective for delay and duration.
My html code with the text all the text, which is shown base on the loop.
<div class="onboarding-content">
<div [class]="bottomStyle">
<div class="onboardtxt one">
<p [class]="firstAnimation">Hello, Meet Mat</p>
</div>
<div class="onboardtxt two">
<p [class]="secondAnimation">Some text</p>
</div>
<div class="onboardtxt three">
<p [class]="thirdAnimation">Some text two </p>
</div>
<div class="onboardtxt four">
<p [class]="forthAnimation">Some text three</p>
</div>
</div>
</div>
My js file
// Animation
count: number;
display: string = "display";
firstAnimation: string = "first";
secondAnimation: string = "second";
thirdAnimation: string = "third";
forthAnimation: string = "forth"
truthy: any;
bottomStyle: string = "bottom"
constructor(public navCtrl: NavController) {
var messages = ['1','2','3','4','5']
var count = 0;
var that = this
var timer = function () {
if (count === 1) {
that.firstAnimation = "first-para-animation";
} else if (count === 2) {
that.firstAnimation = "first-second-fire-animation";
that.secondAnimation = "second-para-animation";
} else if (count === 3) {
that.secondAnimation = "second-second-fire-animation";
that.thirdAnimation = "third-para-animation";
} else if (count === 4) {
that.thirdAnimation = "third-second-fire-animation";
that.forthAnimation = "forth-para-animation";
} else if (count === 5) {
that.truthy = true;
// that.bottomStyle = "no-margin"
}
// check the length of count before pushing
if (count < messages.length) {
count += 1
} else {
clearInterval(interval)
}
}
// // setting the interval after how long it should call the timer function
var interval = setInterval(timer, 1000)
}
ionViewDidLoad() {
console.log('ionViewDidLoad home page');
anime.timeline({ loop: false })
.add({
targets: 'div.bottomStyle',
translateY: [
{ value: 10, delay: 0 },
// { value: 0, duration: 400 },
],
easing: "easeOutQuart",
duration: 0,
// delay: function (el, i, l) {
// return 1000 * i;
// },
// delay: function(el, i) {
// return 800 * i;
// },
color: '#fff'
})
anime.timeline({ loop: false })
.add({
targets: ['.onboardtxt.one',],
duration:100,
// delay:1200,
opacity: 0.5
})
anime.timeline({ loop: false })
.add({
targets: ['.onboardtxt.two',],
// delay:1300,
delay:4400,
opacity: 0.5,
// opacity: 0.5,
})
anime.timeline({ loop: false })
.add({
targets: ['.onboardtxt.three',],
delay:5500,
opacity: 0.5,
// delay:500
});
}
Have you looked at the documentation since then? It's quite good: https://animejs.com/documentation/#timelineBasics
Based on your code, you need to add to only ONE timeline, so that they are synced (the pushed texts happen sequentially).
Example derived from "Timeline Basics":
// Create a timeline with default parameters
var tl = anime.timeline({
easing: 'easeOutExpo',
duration: 750
});
// Add children
tl
.add({
targets: '.onboardtxt.one',
translateX: 250,
})
.add({
targets: '.onboardtxt.two',
translateX: 250,
})
.add({
targets: '.onboardtxt.three',
translateX: 250,
});
I am trying to implement a for loop for my page loader using JQuery and the framework anime.js
var testimonialElements = $(".loader-animation");
for(var i=0; i< Elements.length; i++){
var element = Elements.eq(i);
//do something with element
var basicTimeline = anime.timeline();
basicTimeline
.add({
targets: element,
opacity: {
value: ['1','0'],
duration: 2000,
delay: 4000
},
letterSpacing: {
value: ['30px','10px'],
duration: 2000,
easing: 'easeInOutSine'
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container on-loader">
<h2 class="loader-animation">Case1</h2>
<h2 class="loader-animation">Case2</h2>
<h2 class="loader-animation">Case3</h2>
<h2 class="loader-animation">Case4</h2>
</div>
The issue is , the script is not looping through and initiating the animation for each loop .
Extremely sorry if the question is simple , I am new to javascript & anime.js framework.
There is no need to use loop , first you passe the .loader-animation selector to your anime and you have just to use a callback function , in which it return the current element and it's order between all the elements (1,2,3. ...) and multiply the delay by the order of this last :
(after you can play on the delay second to sweet your intention )
See below working Snippet
var basicTimeline = anime.timeline();
basicTimeline.add({
targets: ".loader-animation",
opacity: {
value: ['1', '0'],
duration: 2000,
delay: function(el, i) {
$(el).removeClass("otherclass");
return 2000 * (i + 1);
},
},
letterSpacing: {
value: ['30px', '10px'],
duration: 2000,
easing: 'easeInOutSine',
delay: function(el, i) {
return 2000 * (i);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
<div class="container on-loader">
<h2 class="loader-animation otherclass">Case1</h2>
<h2 class="loader-animation otherclass">Case2</h2>
<h2 class="loader-animation otherclass">Case3</h2>
<h2 class="loader-animation otherclass">Case4</h2>
</div>
hi i have some problem on jquery code . this code fade up on scroll i use number counter values in this code
countswing = 0;
tiles = $("div .newstats").fadeTo(0, 0);
$(window).scroll(function(d,h) {
tiles.each(function(i) {
a = $(this).offset().top + $(this).height();
b = $(window).scrollTop() + $(window).height();
if (a < b)
{
$(this).fadeTo(2000,1);
if(countswing<1)
{
jQuery({someValue: 0}).animate({someValue: 700}, {
duration: 1000,
easing:'swing', // can be anything
step: function() { // called on every step
// Update the element's text with rounded-up value:
$('#stats1').text(Math.ceil(this.someValue) + "+");
}
});
jQuery({someValue: 0}).animate({someValue: 500}, {
duration: 1000,
easing:'swing', // can be anything
step: function() { // called on every step
// Update the element's text with rounded-up value:
$('#stats2').text(Math.ceil(this.someValue) + "+");
}
});
jQuery({someValue: 0}).animate({someValue: 1000}, {
duration: 1000,
easing:'swing', // can be anything
step: function() { // called on every step
// Update the element's text with rounded-up value:
$('#stats3').text(Math.ceil(this.someValue) + "+");
}
});
countswing++;
}
}
});
});
but my problem is when i scroll download or scroll up number count not stop its number count again and again i want when i scroll download browser its fade up show then number count only one time when its number count complete then not its count again and again
i also use countswing variable of value 0 for stop counter . like you see in code but its not work it its show same problem .
please tell me how to do only count one time?