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 clear an interval in an if statement

So, I'm working on a game called Mini Arcade which features a bunch of different minigames. I found a way to create a fade effect after I click a button to go to another page. The fade effect seems to work properly, but after going to the console of the page, the fade interval doesn't clear like it's supposed to when the opacity variable hits 0, which makes the opacity of the object go into the negatives. This is a problem because once I begin making buttons that fade back to the homepage, the homepage will still be fading out, while fading in at the same time, which is a big problem.
if(opacity == 0){
clearInterval(fadeOut);
}
As you can tell, it's just a simple if statement within my fade out function. Sorry if I didn't explain this well, but I could really use some help. Thanks.

You need to initiate your Interval first and assign it to a variable:
var myInterval = window.setInterval(fadeOut, 1000);
then you can clear it with clearInterval:
clearInterval(myInterval);

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.

Animation play state not working on Safari

I don't know whats wrong but every bug I am coming across is Safari related and its very annoying. I have a code in my website that when a users mouse is not on the body of the page, like in another tab or physically not on the page, the circle animations pause and when the users mouse returns on the body again the css animation resumes where it left off. It works perfectly on Chrome, Firefox....But on Safari... It has this blue background that popup when you leave the body, and when you return it goes crazy and starts all colors at once. Sometimes it won't even start after its done and you have to refresh. Here is are gifs I recorded.
When the blue background comes:
https://gyazo.com/1d063cb8ccce17481df858330b5c8a80
When all the colors start at once:
https://gyazo.com/9b77fe0746c34aeae73af970aec9e75b
How its suppose to look
https://gyazo.com/cdcebb77327b166d0995b2598938e6d7
Here is my code.
Code pen
https://codepen.io/anon/pen/dWvwKR
Java Script
$("body").on("mouseleave",function(){
console.log("MOUSE IS OUT");
$("#firstCircle").css({"animation-play-state":"paused"});
$("#firstCircle").css({"-webkit-animation-play-state":"paused"});
$("#firstCircle").css({"-ms-animation-play-state":"paused"});
$("#firstCircle").css({"-moz-animation-play-state":"paused"});
$("#firstCircle").css({"-o-animation-play-state":"paused"});
$("#secondCircle").css({"animation-play-state":"paused"});
$("#secondCircle").css({"-webkit-animation-play-state":"paused"});
$("#secondCircle").css({"-ms-animation-play-state":"paused"});
$("#secondCircle").css({"-o-animation-play-state":"paused"});
$("#secondCircle").css({"-moz-animation-play-state":"paused"});
$("#thirdCircle").css({"animation-play-state":"paused"});
$("#thirdCircle").css({"-webkit-animation-play-state":"paused"});
$("#thirdCircle").css({"-ms-animation-play-state":"paused"});
$("#thirdCircle").css({"-moz-animation-play-state":"paused"});
$("#thirdCircle").css({"-o-animation-play-state":"paused"});
$("#fourthCircle").css({"animation-play-state":"paused"});
$("#fourthCircle").css({"-webkit-animation-play-state":"paused"});
$("#fourthCircle").css({"-moz-animation-play-state":"paused"});
$("#fourthCircle").css({"-o-animation-play-state":"paused"});
$("#fourthCircle").css({"-ms-animation-play-state":"paused"});
$("#fifthCircle").css({"animation-play-state":"paused"});
$("#fifthCircle").css({"-webkit-animation-play-state":"paused"});
$("#fifthCircle").css({"-ms-animation-play-state":"paused"});
$("#fifthCircle").css({"-moz-animation-play-state":"paused"});
$("#fifthCircle").css({"-o-animation-play-state":"paused"});
$("#sixthCircle").css({"animation-play-state":"paused"});
$("#sixthCircle").css({"-webkit-animation-play-state":"paused"});
$("#sixthCircle").css({"-o-animation-play-state":"paused"});
$("#sixthCircle").css({"-moz-animation-play-state":"paused"});
$("#sixthCircle").css({"-ms-animation-play-state":"paused"});
});
$(window).on("mouseenter",function(){
console.log("MOUSE IS IN");
$("#firstCircle").css({"animation-play-state":"running"});
$("#firstCircle").css({"-webkit-animation-play-state":"running"});
$("#firstCircle").css({"-ms-animation-play-state":"running"});
$("#firstCircle").css({"-moz-animation-play-state":"running"});
$("#firstCircle").css({"-o-animation-play-state":"running"});
$("#secondCircle").css({"animation-play-state":"running"});
$("#secondCircle").css({"-webkit-animation-play-state":"running"});
$("#secondCircle").css({"-ms-animation-play-state":"running"});
$("#secondCircle").css({"-moz-animation-play-state":"running"});
$("#secondCircle").css({"-o-animation-play-state":"running"});
$("#thirdCircle").css({"animation-play-state":"running"});
$("#thirdCircle").css({"-webkit-animation-play-state":"running"});
$("#thirdCircle").css({"-ms-animation-play-state":"running"});
$("#thirdCircle").css({"-moz-animation-play-state":"running"});
$("#thirdCircle").css({"-o-animation-play-state":"running"});
$("#fourthCircle").css({"animation-play-state":"running"});
$("#fourthCircle").css({"-webkit-animation-play-state":"running"});
$("#fourthCircle").css({"-ms-animation-play-state":"running"});
$("#fourthCircle").css({"-moz-animation-play-state":"running"});
$("#fourthCircle").css({"-o-animation-play-state":"running"});
$("#fifthCircle").css({"animation-play-state":"running"});
$("#fifthCircle").css({"-webkit-animation-play-state":"running"});
$("#fifthCircle").css({"-ms-animation-play-state":"running"});
$("#fifthCircle").css({"-moz-animation-play-state":"running"});
$("#fifthCircle").css({"-o-animation-play-state":"running"});
$("#sixthCircle").css({"animation-play-state":"running"});
$("#sixthCircle").css({"-webkit-animation-play-state":"running"});
$("#sixthCircle").css({"-ms-animation-play-state":"running"});
$("#sixthCircle").css({"-moz-animation-play-state":"running"});
$("#sixthCircle").css({"-o-animation-play-state":"running"});
});
});

Hi #thatoneguy90 that's because Safari pauses JS on inactive tabs after 1000ms (1s) to preserve CPU. You'll need to work around the automatic pausing of setInterval and requestAnimationFrame. This could also be causing the blue color when you roll outside the viewport.
Definitely visit this one for a JS example of how to make this work:
How can I make setInterval also work when a tab is inactive in Chrome?
You might also find this helpful for more info on the topic:
How do browsers pause/change Javascript when tab or window is not active?
Additionally, if this is close to the final result, you can probably achieve this using CSS as well.

Synching animations, or calling at the halfway point of an animation

I have a somewhat difficult animation to do in JQuery, and I haven't found a good way to handle it. I have a mobile site with a scene on the screen which displays a series of choices. When a choice is made, the choices slide off screen, and simultaneously a new scene of a city is brought in (it's supposed to simulate driving) - and this scene, instead of stopping in the center of the screen, it passes all the way through the opposite end of the screen. The problem is, when it gets to the center, I want to trigger a new div to come in just behind it, matching the speed, etc, so everything appears in synch.
If I set the animation for the city scene to be in two parts, once to the center where it could trigger the new choice scene coming in, and once to go off screen, there is a noticeable jerk. And I haven't found a way to trigger a delay, because at the end of the delay I need to make a call to a custom function, not a jquery function. So this is my code:
Driving Scene (called when choices begin animating out):
$('#interlude').animate({marginLeft: -viewportW + "px"},3000,'linear',function(){
$('#interlude').remove();
displayScene(sceneID); //need to figure out how to call this at the halfway point
});

Use setTimeout() right before your animation to trigger the second animation halfway through the first animation.
var animateTime = 3000;
setTimeout("displayScene(" + sceneId + ")", animateTime / 2);
$('#interlude').animate({marginLeft: -viewportW + "px"},animateTime,'linear',function(){
$('#interlude').remove();
});