{"id":13426006,"url":"https://github.com/frameable/tragopan","last_synced_at":"2025-08-13T01:48:25.759Z","repository":{"id":57378806,"uuid":"186831503","full_name":"frameable/tragopan","owner":"frameable","description":"Minimal dependency-free pan/zoom library","archived":false,"fork":false,"pushed_at":"2023-04-14T17:19:00.000Z","size":601,"stargazers_count":367,"open_issues_count":3,"forks_count":7,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-07-30T12:52:20.723Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://frameable.github.io/tragopan/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/frameable.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-05-15T13:25:15.000Z","updated_at":"2025-07-23T21:23:13.000Z","dependencies_parsed_at":"2024-01-14T16:22:36.642Z","dependency_job_id":"b65ad319-be5d-41bd-aa11-b004bb25653b","html_url":"https://github.com/frameable/tragopan","commit_stats":null,"previous_names":["team-video/tragopan"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/frameable/tragopan","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frameable%2Ftragopan","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frameable%2Ftragopan/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frameable%2Ftragopan/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frameable%2Ftragopan/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/frameable","download_url":"https://codeload.github.com/frameable/tragopan/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frameable%2Ftragopan/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270166013,"owners_count":24538440,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-12T02:00:09.011Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T00:01:24.085Z","updated_at":"2025-08-13T01:48:25.720Z","avatar_url":"https://github.com/frameable.png","language":"JavaScript","readme":"![](https://team-video.github.io/tragopan/mascot.jpg)\n\n# tragopan\n\nMinimal dependency-free pan/zoom library\n\n```html\n  \u003cdiv id=\"viewport\"\u003e\n    \u003cdiv id=\"content\"\u003e\n      \u003c!-- your pan/zoomable content here --\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\n  \u003cscript\u003e\n    const tragopan = new Tragopan({\n      viewport: document.querySelector('#viewport'),\n      content: document.querySelector('#content')\n    });\n  \u003c/script\u003e\n```\n\n## Features\n\n- Vanilla JavaScript\n- Just ~200 source lines of code\n- Minified gzip'd payload is about 1.6k\n- Fast -- uses native browser scrolling for panning\n- Focal zooming in/out based on mouse pointer position\n- Options for panning with space-drag, zooming with scroll\n- Made with :heart: at https://frameable.com\n\n## How it works\n\nTragopan uses native browser scrolling as its implementation for panning (left/right/up/down), and transform/scale for zooming (in/out).  In our testing, we found that native scrolling was far more efficient than using transform for panning.  As an extra bonus, if your DOM is structured so that your `viewport` element can be your document body, some browsers appear to do even more optimization for that special case.\n\n## Methods\n\n### new Tragopan(options)\n\nInstantiate a pan/zoomable tragopan instance, given a viewport and a nested content element.  Options include:\n\n  - `viewport`: reference to a top-level element which will contain content to be panned and zoomed\n  - `content`: a child element of the viewport\n  - `scaleIncrement`: percentage by which zooming in or out one click should change the scale (default `0.04`)\n  - `scrollZoom`: enable bare scrolling to zoom, rather than ctrl/option-scroll to zoom (default `false`)\n  - `spacePan`: enable panning via holding down the space bar (default `false`)\n  - `minScale`: minimum zoom scale factor (default `0.5`)\n  - `maxScale`: maximum zoom scale factor (default `4`)\n\n### tragopan.configure(options)\n\nConfigure a tragopan instance with any options accepted by the constructor above.\n\n### tragopan.pan(x, y)\n\nPan to the given x and y coordinates in content space.\n\n### tragopan.zoom(scale[, focalPoint])\n\nZoom to the given scale, keeping the given focal point in-place on the screen.  Focal point should be an object with x and y coordinates in content space.  If focal point is ommitted, the center point of the viewport is used instead.\n\n### tragopan.zoomIn([scaleIncrement])\n\nZoom in by the given `scaleIncrement` if provided, or else zoom in by the configured/default `scaleIncrement`.\n\n### tragopan.zoomOut([scaleIncrement])\n\nZoom out by the given `scaleIncrement` if provided, or else zoom out by the configured/default `scaleIncrement`.\n\n### tragopan.center()\n\nPan to the center of the content\n\n### tragopan.reset()\n\nPan to the center of the content\n\n\n### tragopan.on(eventName, handlerFn)\n\nRegister an event handler to be called when some panning or zooming event occurs.  See below for more info.\n\n## Events\n\n### panstart\n\nFired when a pan may be starting as a result of the user mousing-down on the viewport.  A pan may or may not follow, with a click being a possible alternative conclusion.\n\n### panmove\n\nFired when the content moves relative to the viewport, whether from a click-drag, from a call to `zoom()`, or from a native scroll mouse event.\n\n### panend\n\nFired when a pan via click-drag ends with a mouse-up.\n\n### panzoom\n\nFired when the scale changes, either from a call to `zoom()`, or from a native \nctrl/option-scroll mouse event.\n\n### panchange\n\nFired when any event above occurs.\n\n\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fframeable%2Ftragopan","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fframeable%2Ftragopan","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fframeable%2Ftragopan/lists"}