Not an issue, but a shadow "fix"/suggestion for turn.js 5 for anyone wondering

[turhtkar]

I'm working on a digital book, anyway I tried to make pages more profund I realized there is the shadow that I can manipulate, but I didnt want a static shadow
meaning that if a book is display double and it is rtl or ltr, I want the shadow to only appear on the side who's my book direction, making it clearer for the actual direction,
but that means we need to know if we're at the first page, and which direction and when we turn, and make it smoothly,
also I noticed there would be a flickering in the current update shadow in turn js 5 (look for the repo on github and you will find it)

anyway here's what I did
_updateShadow: function() {
var view, view2, shadow,
data = this.data(),
width = this.width(),
height = this.height(),
pageWidth = (data.display=='single') ? width : width/2;

  // Debounce shadow updates during animation
  if (data.pageMv.length > 0 && !data.shadowTimeout) {
    data.shadowTimeout = setTimeout(() => {
      delete data.shadowTimeout;
    }, 50); // Wait for animation to settle
    return;
  }

  view = this.turn('view');

  if (!data.shadow) {
    data.shadow = $('<div />', {
      'class': 'shadow',
      'css': divAtt(0, 0, 0).css
    }).appendTo(this);
  }

  // Add transition to smooth shadow changes
  data.shadow.css('transition', 'all 0.3s ease-out');

  // Rest of the shadow logic...
  // Add requestAnimationFrame for smooth updates
  requestAnimationFrame(() => {
    if (!view[0]) shadow = (data.direction=='ltr') ? 1 : 2;
    else if (!view[1]) shadow = (data.direction=='ltr') ? 2 : 1;
    else shadow = 3;

    var boxShadow = 'rgba(0, 0, 0, 0.2) 6px 1px 2px 0px, rgba(0, 0, 0, 0.2) -6px 1px 2px 0px';
    
    switch (shadow) {
      case 1:
        data.shadow.css({
          width: pageWidth,
          height: height,
          top: 0,
          left: pageWidth,
          boxShadow: view[0] === 0 ? 'rgba(0, 0, 0, 0.2) 6px 1px 2px 0px' : 'none'
        });
        break;
    case 2: // rtl cover pages display double
      data.shadow.css({
        width: pageWidth,
        height: height,
        top: 0,
        left: 0,
        boxShadow: view[0] === 0 && 'rgba(0, 0, 0, 0.2) -6px 1px 2px 0px'
      });
      break;
    case 3: // display double with 2 pages in view or display single
      data.shadow.css({
        width: width,
        height: height,
        top: 0,
        left: 0,
        boxShadow: boxShadow
      });
      break;
  }
});

},

also I added a transition normally with css
.magazine .shadow {
transition: box-shadow 0.3s ease;
}

as you can see the in the pictures the result, the shadow in cover and the shadow in normal display double view,

also you can simply play with the shadows and add a condition to check for last page if u have an ending page cover
(you are welcome to ask questions directly since I know it was a pain in the ass to figure out how to take advantage of this awesome library in more modern stacks)