Pause animation or canvas feature

[Derek Zhou]

I'm using this library to render the background of a banner section. While I enjoy having the animated background, I'd like it to stop if I scroll past it or if the user is not actively engaging with that part of the page (i.e. mouse being over it). This should help save the user quite a bit of battery and computation power. Is there a way to stop the animation? I was considering taking an image of the canvas and swapping it, but it'd be easier if stopping the animation was a feature.

[blizzard983]

Try using add/remove class ".noDisplay" on window scroll on .

css

.noDisplay{
display:none !important;
}

jQuery

$(window).scroll(function(e){

if($(window).scrollTop>...px){
$('canvas').addClass('.displayNo')
}
else{
$('canvas').removeClass('.displayNo')
}
})

[Derek Zhou]

@blizzard983 Hi thanks for the tip, but I was wondering if there was a built in feature to pause the animation. The second approach would be to create an image and replace the canvas. I would like to avoid this if possible.