
Show HN: Tragopan – Minimal, dependency-free pan/zoom JavaScript library - dxchester
https://github.com/team-video/tragopan
======
dxchester
We use this library on [https://team.video](https://team.video) for panning
and zooming around in screenshares.

It can be really useful if you have situation where a colleague is sharing
their hi-res screen, when meanwhile you're on a laptop with a lower-res
screen, and you want to zoom in on their terminal or some part of the
screenshare so that the text there can be easier to read.

~~~
xgenecloud
Demo link -> [https://team-video.github.io/tragopan/](https://team-
video.github.io/tragopan/)

This looks good, will check out for one of our projects.

------
kevsim
Looks nice! We've been looking for a lightweight solution to zooming on images
in the issue tracker we're building [0]. Figured we'd end up rolling our own
because we're trying to avoid adding heavy dependencies for these little
things. But this looks great, we'll definitely give it a try!

0: [https://kitemaker.co](https://kitemaker.co)

------
josephernest
Having infinite pan/zoom is a very exciting, you always have free room to
write new things! I made BigPicture a few years ago for this purpose. Live
demo:
[https://josephernest.github.io/bigpicture.js/index.html](https://josephernest.github.io/bigpicture.js/index.html)

Note: I never did a mobile version, so it only works on desktop; same for the
website [https://bigpictu.re/demo](https://bigpictu.re/demo)

~~~
dxchester
Nice, that is a cool concept. Part of the motivation with tragopan was to see
if using native scrolling could be a more natural fit especially on mobile,
versus the more common way of using transform/translate.

On BigPicture, two bits of feedback for what it's worth:

\- Maybe try `user-select: none` while a user is panning? Otherwise I end up
inadvertently selecting text sometimes when I try to pan around, especially in
Firefox

\- I couldn't figure out how to make a given bit of text bigger or smaller,
like the demo shows is obviously possible. I did make it happen a few times
but then couldn't understand what steps had actually led to the change...
Maybe some instructions on that, or just a floating toolbar could help (even
though the toolbar-less aesthetic and approach is otherwise pretty nice!)

------
miguelmota
Scroll zoom on the demo image is very choppy for me. Not sure if it's my
screen or the library itself.

~~~
owenshen24
Agreed. I'm using the latest version of Firefox.

~~~
dougwbrunton
Which OS? There is an issue open for Firefox on iOS: [https://github.com/team-
video/tragopan/issues/3](https://github.com/team-video/tragopan/issues/3). Is
yours different?

~~~
owenshen24
Firefox on Linux.

------
sambeau
I'm finding it very choppy and jumpy Safari Version 13.1.1 (14609.2.9.1.3)
Mojave 10.14.6

~~~
dougwbrunton
Is the toolbar jumpy (which is a known problem, I've just opened an issue for
it at [https://github.com/team-
video/tragopan/issues/5](https://github.com/team-video/tragopan/issues/5)), or
is the zooming jumpy?

------
Jarred
It works well on Chrome for desktop.

On the demo page, it looks like you're using CSS that isn't supported by most
browsers, which might be what causes the flickering / jank on Safari.

    
    
      width: max-length;
      scrollbar-width: none;

------
tarkin2
Very jumpy on my iphone with firefox or chrome, sadly. Okay with safari. I
suspect it’s the shoddy version of webkit apple forces upon moz and google.

Nice effort. I applaud any efforts to make a dependency free anything in js.

~~~
dougwbrunton
Thanks for the report - I've filed it at [https://github.com/team-
video/tragopan/issues/3](https://github.com/team-video/tragopan/issues/3)

I couldn't reproduce the Chrome jumpiness - what version of Chrome/iOS was
giving you trouble?

~~~
tarkin2
Latest ios. Chrome 70.0.3538.75. It’s a little better in chrome than ff, but
when I pan up and down in chrome it jumps.

~~~
dougwbrunton
Okay, thanks.

------
KaoruAoiShiho
Can you write a bit about why this over other pan zoom libs.

~~~
dougwbrunton
I've opened an issue to track this request: [https://github.com/team-
video/tragopan/issues/4](https://github.com/team-video/tragopan/issues/4)

------
jbverschoor
Very smooth

