Pixi.js code that produces the blur problem

pixi-js-slideshow.js

const canvasScale = 1.06;
const landscapeRatio = 0.9;
const portraitRatio = 0.5;
const targetScale = 1.2;
const blurStrength = 12;
let blurFilters = [];

var anim = {
  globalOffset: 0,
  globalPos: 1,
  scaleTarget: 1.1
}

const canvas = document.getElementById('mycanvas');
const app = new PIXI.Application({
    view: canvas,
    width: window.innerWidth * canvasScale,
    height: window.innerHeight * canvasScale
});


app.stage.sortableChildren = true;


PIXI.settings.RESOLUTION = window.devicePixelRatio;

document.body.appendChild(app.view);


// load the texture we need
app.loader.add(mediaResources).load((loader, resources) => {

    let canvasHeight = window.innerHeight * canvasScale;
    let canvasWidth = window.innerWidth;

    var sprites = [];
    var totalOffset = 0;

    var r, t, f, scaleFactor, frameAr, targetAr, wouldBeHeight, wouldBeWidth, diff;

    for(var i = 0; i < mediaResources.length; i++) {

      blurFilters[i] = new PIXI.filters.BlurFilter(blurStrength, 4);

      r = resources['rs' + i];
      t = r.texture;
      f = t.frame;

      frameAr = f.width / f.height;

      targetWidth = frameAr < 1 ? canvasWidth * portraitRatio : canvasWidth * landscapeRatio;
      targetAr = targetWidth / canvasHeight;

      if(frameAr < targetAr) {

        scaleFactor = targetWidth / f.width;
        wouldBeHeight = f.height * scaleFactor;

        diff = wouldBeHeight - canvasHeight;

        // reframe the texture, calculate new height and start cropping it from the correct point on the y-axis
        f.height = f.height - diff / scaleFactor;
        f.y = diff / scaleFactor / 2;
      } else {
        scaleFactor = canvasHeight / f.height;
        wouldBeWidth = f.width * scaleFactor; // calculate the width, the frame would have

        diff = wouldBeWidth - targetWidth;

        // reframe the texture, calculate new width and start cropping it from the correct point on the x-axis
        f.width = f.width - diff / scaleFactor;
        f.x = diff / scaleFactor / 2;
      }

      t.updateUvs();

      sprites[i] = new PIXI.Sprite(t);
      sprites[i].interactiveChildren = false;

      sprites[i].scale.x = scaleFactor;
      sprites[i].scale.y = scaleFactor;

      sprites[i].anchor.set(0.5);

      if(i) {
        totalOffset += Math.floor(sprites[i].width / 2) + Math.floor(sprites[i - 1].width / 2);
      }

      sprites[i].totalOffset = totalOffset;
      sprites[i].scaleFactor = scaleFactor;
      sprites[i].scaleMultiplier = targetScale;

      sprites[i].y = canvasHeight / 2;
      sprites[i].x = totalOffset;
      sprites[i].zIndex = 1;

      sprites[i].filters = [blurFilters[i]];

      app.stage.addChild(sprites[i]);
    }

    var initialOffset = window.innerWidth / 2;
    anim.globalOffset = sprites[1].totalOffset;

    // set middle slide to no blur and no extra scale;
    sprites[1].scaleMultiplier = 1;
    sprites[1].zIndex = 0;
    blurFilters[1].blur = 0;

    // Listen for frame updates
    app.ticker.add(() => {

      for (var i = 0; i < sprites.length; i++) {
        var s = sprites[i];
        s.x = initialOffset + s.totalOffset - anim.globalOffset;
        s.scale.x = s.scaleFactor * s.scaleMultiplier;
        s.scale.y = s.scaleFactor * s.scaleMultiplier;
      }

    });

    // skip to next slide
    document.addEventListener("keydown", (e) => {
      if (e.keyCode == '39') {
        skip();
      }
    });

    function skip() {

      // animation is handled by anime.js

      var tl = anime.timeline({
        easing: 'easeOutQuad',
        duration: 400
      });

      tl
      .add({
        targets: anim,
        globalOffset: sprites[anim.globalPos + 1].totalOffset,
        globalPos: '+=1',
        complete: function() {
          if(anim.globalPos > mediaResources.length - 3) {
            console.log("NOW")
            anim.globalOffset = sprites[1].totalOffset;
            anim.globalPos = 1;
          };
        }
      })
      .add({
        targets: sprites[anim.globalPos],
        scaleMultiplier: targetScale,
        zIndex: 1
      }, 0)
      .add({
        targets: blurFilters[anim.globalPos],
        blur: blurStrength + Math.random()
      }, 0)
      .add({
        targets: sprites[anim.globalPos + 1],
        scaleMultiplier: 1,
        zIndex: 0,
        complete: function() {
          app.stage.sortChildren();
        }
      }, 0)
      .add({
        targets: blurFilters[anim.globalPos + 1],
        blur: 0
      }, 0)
    }

});