pixi-viewport icon indicating copy to clipboard operation
pixi-viewport copied to clipboard

How to use bounce() with pinch()

Open yuki384 opened this issue 4 years ago • 2 comments

When using the .bounce() and attempting to move with two-finger touch, the entire world jitters. I've tried using drag({ clampWheel: true }), but it's seems stops bounce. Any tips on how to implement this?

My plugins:

viewport
  .drag({
    direction: 'all',
    pressDrag: true,
    factor: 0.8,
  })
  .clamp({
    left: -40,
    right: 5120 + 40,
    top: -40,
    bottom: 2880 + 40,
  })
  .pinch()
  .decelerate({
    friction: 0.925,
  })
  .bounce({
    sides: 'all',
    time: 350,
    ease: 'easeOutSine',
  })
  .clampZoom({
    minWidth: 800,
    maxWidth: 5120,
    minHeight: 500,
    maxHeight: 2880,
  })

yuki384 avatar Sep 18 '21 14:09 yuki384

The clamp and bounce are interfering. You should only use one.

davidfig avatar Sep 18 '21 14:09 davidfig

Thank you for reply. I tried it, but it does not change movement of jitters.

viewport
      .drag(ViewportSetting.drag)
      .pinch()
      .decelerate({
        friction: 0.925,
      })
      .bounce({
        sides: 'all',
        time: 350,
        ease: 'easeOutSine',
      })
      .clampZoom({
        minWidth: ViewportSetting.viewportMinWidth,
        maxWidth: ViewportSetting.viewportWidth,
        minHeight: ViewportSetting.viewportMinHeight,
        maxHeight: ViewportSetting.viewportHeight,
      })

yuki384 avatar Sep 18 '21 14:09 yuki384