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,
});
Related
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>
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 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>
I am currently building a website and want to fade several words at certain interval and certain fading time with infinite loop. This is exactly what I'm trying to achieve:
I've come up with this but don't know how to extend the time each word is displayed independently of fading time, so that it looks like on gif.
var text = ['fade1', 'fade2', 'fade3'];
var counter = 0;
var elem = document.getElementById("fade");
function change() {
jQuery(elem).fadeTo(1400, 0, function() {
this.innerHTML = text[counter];
counter = ++counter % text.length;
jQuery(this).fadeTo(1400, 1, change)
})
}
change()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Text <span id="fade"></span></p>
You can use jQuery.delay to pause the code for a certain number of milliseconds before moving to the next one:
var timeOnEachText = 2000; // Milliseconds to spend on each before moving to next
var text = ['fade1', 'fade2', 'fade3'];
var counter = 0;
var elem = document.getElementById("fade");
function change() {
jQuery(elem).delay(timeOnEachText).fadeTo(1400, 0, function() {
this.innerHTML = text[counter];
counter = ++counter % text.length;
jQuery(this).fadeTo(1400, 1, change)
})
}
change()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Text <span id="fade"></span></p>
If you just want to change the interval, you could convert your text array to an array-object and add some values to it, like this:
var text = [
{
text: 'fade1',
fadeIn: 1000,
fadeOut: 500,
timeout: 100,
},
{
text: 'fade2',
fadeIn: 1100,
fadeOut: 1500,
timeout: 1000,
},
{
text: 'fade3',
fadeIn: 500,
fadeOut: 300,
timeout: 3000,
}
];
var counter = 0;
var fadeTimeout = 0;
var elem = document.getElementById("fade");
function change() {
var currentTextItem = text[counter];
setTimeout( () => {
jQuery(elem).fadeTo(currentTextItem.fadeIn, 0, function() {
this.innerHTML = currentTextItem.text;
counter = ++counter % text.length;
jQuery(this).fadeTo(currentTextItem.fadeOut, 1, change)
});
// Set new timeout because in this set up the next item
// controls the timeout of the previous one.
fadeTimeout = currentTextItem.timeout;
}, fadeTimeout );
}
change()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Text <span id="fade">initial text</span></p>
I don't know if it'll work for you but have you thought about using #keyframes and just hiding showing the images at different intervals? If you know what the data is before hand and the number of images, you can set up key frames and it'll display much nicer.