Develop Reference

Minimize browser repainting: Simplest code for intersection in javascript not working

I have this auto slide between 3 colors.
I'm using Js to toggle opacity and move to the next slide each time on loop.
Everything works well.
https://codepen.io/cat999/pen/bGpjjpN
the main issue is that I have ANIMATION PERFORMANCE ISSUES
I’ll soon find that animating constantly each images can cause devices to run really hot and become slow or unresponsive, especially when the animations have been running for a while.
This will hopefully be optimized in subsequent browser releases, but until then, I’ll just have to minimize browser repainting. I’ve found that using an IntersectionObserver works great, and allows us to stop the animations whenever the variable text is off-screen. But in that case, is not working.
var observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
// Pause/Play the animation
if (entry.isIntersecting) entry.target.style.animationPlayState = "running"
else entry.target.style.animationPlayState = "paused"
});
});
var variableTexts = document.querySelectorAll(".promo-intro-slide");
variableTexts.forEach(function(el) { observer.observe(el); });
Could anyone out there help me to stop my animation with intersection observer?

How to stop animations when a sprite's movement stops in Phaser 3

Posting this to share how I tackled this problem. I had searched everywhere and couldn't seem to find a working solution.
The problem (my version) - I had a sprite that was going to be my player in my game. I had both a running left and a running right animation. These animations are set to loop, so the player will appear as if they are running when their velocity is increased. I wanted the player's animation to stop once they had stopped moving

My implementation
update() {
//If right arrowkey is pressed
if (this.arrowKeys.right._justDown) {
//Move player
this.hero.setVelocityX(5);
//Play your animation animation
this.hero.anims.play('yourAnim', true);
};
//This will run every time the animation "repeats", meaning it has gone through all of its frames. Make sure your animation is set to loop!
this.hero.on("animationupdate", () => {
//If the player has stopped moving
if (this.hero.body.velocity.x < 0.5 && this.hero.body.velocity.x > -0.5) {
//Stop the animation
this.hero.anims.stop();
}
});
}
Formatting is a little bad. And there's almost surely a slightly quicker way to do this. But this is my implementation for now, and I just wanted to share in case someone else was having the same issue! Feel free to comment with a better solution, or any questions

I had a problem like this, you might not need a solution anymore, but others might. I used JustDown to start the animation and JustUp to go to my idle state. Code in update:
if(Phaser.Input.Keyboard.JustDown(downKey)){
gamePiece.anims.play("down");
}
if(Phaser.Input.Keyboard.JustUp(downKey)){
gamePiece.anims.play("spin");
}
In your case, it would stop the animation instead of an idle animation.

I think you're looking for the .pause() method.

CSS Animation stops when tab loses focus [duplicate]

I'm developing a little roulette game like: https://csgofast.com/
My question is, the roulette animation used with transform & transition, works pretty well when I'm in the actual tab.
The problem is, when i move to another tab or miniminize, before the roullete starts, until i dont get back to the tab, it dosnt start scrolling / moving.
Is like the roullete animation is waiting until i get to the tab again, to start moving.
let intervalJackpot = setInterval(() => {
if (something == true) {
$("#slider").css('transform', 'translate3d(-7850px, 0px, 0px)');
$("#slider").css('transition', '15000ms cubic-bezier(0.32, 0.64, 0.45, 1)');
}
}, 500);
The code is in a setInterval, and that's the problem as i know.
The DB.roulleteSpin is just a simple code that comes from the Database.
How I could approach this situation? I will like to know the roulette starts moving and ends in the right place, no matters if I'm in the tab or not.
How i could approach this situation? Can someone show me an example? Thanks a lot.

Iframe and absolute positioned elements

I have a small issue with absolute positioned elements inside of iframe.
So I have a page, on the page I have a iframe with small game. In the game is a guy and the guy has absolute positioned pupils. The pupils are moving by javascript.
Everything works just fine, but if I open that page, and go ahead and browse other pages in different tabs, After I come back the pupils are on other place than before (completely ut form eyes.)
There are more elements positioned absolutely in that iframe and none have the same problem I guess it is because of the Javascript animation. Did someone encouter similar problem? Im sorry but for many reasons I cannot post the page here.
I can post script for pupils animation:
function eyes_sides(){
$('.eyes').animate({
left:parseInt($('.eyes').css('left'))-9
},{duration:1500});
$('.eyes').animate({
left:parseInt($('.eyes').css('left'))
},{duration:1000});
}
function eyes_roll(){
$('.eyes').animate({
left:parseInt($('.eyes').css('left'))-7,
top:parseInt($('.eyes').css('top'))-18
},{duration:1800});
$('.eyes').animate({
left:parseInt($('.eyes').css('left')),
top:parseInt($('.eyes').css('top'))
},{duration:1300});
}
function animate_eyes(){
var animation = random_number(1,2);
//alert(animation);
switch(animation){
case 1:
eyes_roll();
break;
case 2:
eyes_sides();
break;
}
var delay = random_number(4000,12000);
window.animateEyes = setTimeout(function(){animate_eyes()},delay);
}
The script is not perfect, but does what requires.
I was thinking what could cause the problem, and maybe it is somehow connected to that animation runs when the tab is not active? Maybe adding "onBlur" and "onFocus" to stop / start animation would help?
Thanks for advice!

This code is supposed to stop the animation. At least it triggres onblur on your IFRAME. You'll figure out easily, how to start the animation again.
I'm not familiar with jQuery, but you can "translate" the code.
window.onload=function (){
var ifr=document.getElementById('your_iframe');
(function (x){x.onblur=function (){clearTimeout(x.contentWindow.animatedEyes);return;}}(ifr));
return;
}

Bizarre Javascript bug-swapping in images

I have this crazy bug that only comes up sometimes. It was apparent when I was developing this site but then it disappeared for a week or so and now that the site is live it's back. I don't think it has anything to do with my hosting because it bugs out locally as well.
My problem is that I'm swapping the css value background-image on each click. It works perfectly 95% of the time, but sometimes for a span of like 15 minutes it just won't display about half the images, seemingly randomly. The strangest thing is that if you look in the inspector you can see that the script correctly changed the css value, but the image simply wasn't loaded. I have no idea why!
Here's the website: shouldivoteoliver.com It's on the "Propaganda" page.
Here's the Javascript:
$(document).ready(function() {
var n=0;
$(".button").click(function(){
if (n===5){
$('<video style="position:relative;left:250px;" src="http://dl.dropbox.com/u/1011105/6.ogg" controls="controls">your browser does not support the video tag</video>').appendTo($('#putin'));
n++;
$("#putin").css("background-image","none");
}
else{
$('video').remove();
$("#putin").css("background-image",function(){
if (n>13){
n=1;
return ('url(images/1.jpg)');
}
else{
n++;
return ('url(images/'+n+'.jpg)');
}
});
}
});
});

I would suggest using a background image as a sprite and changing the background position as
opposed to changing the background image property.
Here is a tutorial that I googled
http://www.noobcube.com/tutorials/html-css/css-background-image-sprites-a-beginners-guide-/

I tried going through all the slides on the propaganda twice but I didn't come across any problem. I don't know what is going on, but you can make your code a little cleaner and more readable by just making an array to store the contents of each "slide", and simply loop through it on mouse click. I guess you don't really need to set the background property of that div and you could just include an image.
Just an advice, not sure if it will help with your problem, but will make this thing more manageable and easier to add more stuff.

Here's a one-liner
swap value at index i1 with i2
arr.slice(0,i1).concat(ar[i2],ar.slice(i1+1,i2),ar[i1],.slice(i2+1))