Develop Reference

AnimeJS animation takes config from initial click

I implemented a Staggered Grid in React using AnimeJS, with 2 variants, defined as
export const SimpleAnimationConfig: AnimeParams = {
backgroundColor: COLORS[Math.floor(Math.random() * COLORS.length)],
scale: [
{ value: 0.1, easing: "easeOutSine", duration: 500 },
{ value: 1, easing: "easeInOutQuad", duration: 1200 },
],
};
export const CoolerAnimationConfig: AnimeParams = {
scale: [
{ value: 0.1, easing: "easeOutSine", duration: 500 },
{ value: 1, easing: "easeInOutQuad", duration: 1200 },
],
};
(and some other properties defined in CSS)
and using them as
async function onClickTile(index: number) {
const animationConfig = getAnimationConfig(isCooler);
animation.current = anime({
targets: ".tile",
delay: anime.stagger(50, { grid: [columns, rows], from: index }),
...animationConfig,
});
}
where animation is
const animation = useRef<AnimeInstance>();
and getAnimationConfig is
export function getAnimationConfig(isCooler: boolean): AnimeParams {
if (isCooler) {
return CoolerAnimationConfig;
}
return SimpleAnimationConfig;
}
Problem
Let say I clicked on a tile with index 50, it will start a staggered animation from the div with index 50 , Every subsequent animation I trigger from any other div located at any other index will however start from 50.
I console logged index, it shows the right value ,
I console logged the whole object that I am passing inside anime , it shows the correct value for fromIndex in the scope of function delay.
I did resolve the issue with
function onClickTile(index: number) {
animation.current = anime({
targets: ".tile",
delay: anime.stagger(50, { grid: [columns, rows], from: index }),
scale: [
{ value: 0.1, easing: "easeOutSine", duration: 500 },
{ value: 1, easing: "easeInOutQuad", duration: 1200 },
],
...(!isCooler && {
backgroundColor: COLORS[Math.floor(Math.random() * COLORS.length)],
}),
});
}
but still curious what was happening with separate objects, since using separate constants and helpers seems a much cleaner way than this.
DEMO

How to exit a method in Phaser3 only when the played timeline is finished?

I'm quite new in Phaser, but I've already done a bunch of ionic/angular app.
One of my object has a method that will be called by the main scene:
powerOff() {
let easing = 'Cubic'
let overallDuration = 500
let visiblePauseDuration = 100
let flashDuration = overallDuration - visiblePauseDuration / 2
this.scene.tweens.timeline({
tweens: [
{
targets: this,
duration: 0,
tint: 0xff0000,
ease: easing,
},
{
targets: this,
duration: flashDuration,
tint: 0xffffff,
ease: easing,
},
{
targets: this,
duration: visiblePauseDuration,
tint: 0xff0000,
ease: easing,
},
{
targets: this,
duration: flashDuration,
tint: 0xffffff,
ease: easing,
},
{
targets: this,
duration: visiblePauseDuration,
tint: 0xff0000,
ease: easing,
onComplete: () => {
this.scene.sound.play(MainScene.POWER_DOWN)
},
},
{
targets: this,
duration: flashDuration,
tint: 0xf54242,
ease: easing,
},
],
})
this.poweredUp = false
}
The thing is: I need to exit this method only when the timeline has completed.
Is there some await/async support? Or at least promises ?
The scene will call this method on a lot of different objects, and I need that they are not done in parallel but sequentially.
Thanks a lot!!!

var timeline = this.scene.tweens.timeline({
/*TWEENS*/
})
//Timeline complete event listener
timeline.addListener("complete", function(){
//Do something when tweens are complete
}, this);

How to fix this? GSAP animation for Page transition work perfectly only the first time

I`m using barba.js with Gsap.
The idea is to have a transition from the home page and the about page with a centered logo animation, very simple. I click on my button, the transition comes in, the logo scale from 0 to 1, and go down fading, great!
The first animation works as it should but when I clicked again the scale factor is now missing, unfortunately.
How can I fix this to make it work? have a look at my code pen project:
https://codepen.io/cat999/project/editor/AEeEdg
Here my JS
function delay(n) {
n = n || 2000;
return new Promise((done) => {
setTimeout(() => {
done();
}, n);
});
}
function pageTransition() {
var tl = gsap.timeline();
tl.to(".loading-screen", {
duration: 1,
width: "100%",
left: "0%",
ease: "Expo.easeInOut",
});
tl.to("#svg-1", {
duration: 1, opacity: 0, y: 30, stagger: 0.4, delay: 0.2,
});
tl.to(".loading-screen", {
duration: 1,
width: "100%",
left: "100%",
ease: "Expo.easeInOut",
delay: 0.3,
});
tl.set(".loading-screen", { left: "-100%", });
tl.set("#svg-1", { opacity: 1, y: 0 });
}
function contentAnimation() {
var tl = gsap.timeline();
tl.from(".animate-this", { duration: 1, y: 30, opacity: 0, stagger: 0.4, delay: 0.2 });
}
$(function () {
barba.init({
sync: true,
transitions: [
{
async leave(data) {
const done = this.async();
pageTransition();
await delay(2000);
done();
},
async enter(data) {
contentAnimation();
},
async once(data) {
contentAnimation();
},
},
],
});
});

How do I delay the start of a JS animation?

I was wondering if there is an easy way to delay the start of this anime.timeline animation? I have a pre-loader on my site, so I don't want this animation to trigger until the pre-loader disappears, which is after 2000 ms.
<script>
anime.timeline({loop: true})
.add({
targets: '.ml3 .letter',
opacity: [0,1],
easing: "easeInOutQuad",
duration: 2250,
delay: (el, i) => 150 * (i+1)
}).add({
targets: '.ml3',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 10000
});
</script>
I think this is an easy fix, but I'm still new to JS. Thank you!

You can use setTimeout() Method
<script>
setTimeout(function(){
anime.timeline({loop: true})
.add({
targets: '.ml3 .letter',
opacity: [0,1],
easing: "easeInOutQuad",
duration: 2250,
delay: (el, i) => 150 * (i+1)
}).add({
targets: '.ml3',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 10000
});
}, 3000);
</script>
This will run your function with a 3 seconds delay.

Have you try to set timeout before animation start?
var animation = function(){
setTimeout(check, 1000);
}
animation();

jQuery Knob update value with animate

I'm trying to build clock using jQuery Knob.
My clock is working (http://jsfiddle.net/Misiu/9Whck/1/), but right now I'm trying to add some extras to it.
At beginning I want to have all knobs set to 0, then using animate I want to animate their value to current time and then start normal timer update.
My code looks like this (demo here: http://jsfiddle.net/Misiu/cvQED/81/):
$.when(
$('.h').animate({
value: h
}, {
duration: 1000,
easing: 'swing',
progress: function () {
$(this).val(Math.round(this.value)).trigger('change');
}
}),
$('.m').animate({
value: m
}, {
duration: 1000,
easing: 'swing',
progress: function () {
$(this).val(Math.round(this.value)).trigger('change');
}
}),
$('.s').animate({
value: s
}, {
duration: 1000,
easing: 'swing',
progress: function () {
$(this).val(Math.round(this.value)).trigger('change');
}
})).then(function () {
myDelay();
});
function myDelay() {
var d = new Date(),
s = d.getSeconds(),
m = d.getMinutes(),
h = d.getHours();
$('.h').val(h).trigger("change");
$('.m').val(m).trigger("change");
$('.s').val(s).trigger("change");
setTimeout(myDelay, 1000)
}
In when I must call animate for every knob separately, but I would like to use data-targetValue and to have only one animate inside when.
Can this be done?

if you want to use data-targetValue you need to change your js like this
$('.h').data('targetValue', h);//$('.h').attr('targetValue', h);
$('.m').data('targetValue', m);
$('.s').data('targetValue', s);
//...
$.when(
$('.knob').each(function(){//each .knob
$(this).animate({//animate to data targetValue
value: $(this).data('targetValue')
}, {
duration: 1000,
easing: 'swing',
progress: function () {
$(this).val(Math.round(this.value)).trigger('change')
}
});
})
).then(function () {
myDelay();
});
http://jsfiddle.net/cvQED/83/
or without .each
$.when(
$('.knob').animate({
value: 100
}, {
duration: 1000,
easing: 'swing',
progress: function () {
$(this).val(Math.round(this.value/100*$(this).data('targetValue'))).trigger('change')
}
})
).then(function () {
myDelay();
});
http://jsfiddle.net/cvQED/84/