{"id":20762017,"url":"https://github.com/donkeyclip/motorcortex-2dcam","last_synced_at":"2025-04-30T06:28:37.252Z","repository":{"id":38159854,"uuid":"327926519","full_name":"donkeyclip/motorcortex-2dcam","owner":"donkeyclip","description":null,"archived":false,"fork":false,"pushed_at":"2025-04-17T17:33:36.000Z","size":10325,"stargazers_count":0,"open_issues_count":17,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-18T07:58:05.458Z","etag":null,"topics":["2dcam","animation","motorcortex","motorcortex-plugin"],"latest_commit_sha":null,"homepage":"","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/donkeyclip.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-01-08T14:33:14.000Z","updated_at":"2022-04-01T08:41:34.000Z","dependencies_parsed_at":"2024-11-17T10:28:47.453Z","dependency_job_id":"985bba29-64a0-4f89-bf6d-de8456d47f66","html_url":"https://github.com/donkeyclip/motorcortex-2dcam","commit_stats":{"total_commits":621,"total_committers":16,"mean_commits":38.8125,"dds":0.3590982286634461,"last_synced_commit":"2fd517a6094648099d62e2974c7c33c74bc46b72"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donkeyclip%2Fmotorcortex-2dcam","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donkeyclip%2Fmotorcortex-2dcam/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donkeyclip%2Fmotorcortex-2dcam/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donkeyclip%2Fmotorcortex-2dcam/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/donkeyclip","download_url":"https://codeload.github.com/donkeyclip/motorcortex-2dcam/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251653555,"owners_count":21622149,"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","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":["2dcam","animation","motorcortex","motorcortex-plugin"],"created_at":"2024-11-17T10:28:40.214Z","updated_at":"2025-04-30T06:28:37.233Z","avatar_url":"https://github.com/donkeyclip.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MotorCortex-2dcam\n\n**Table of Contents**\n\n- [MotorCortex-2dcam](#motorcortex-2dcam)\n  - [Demo](#demo)\n- [Intro / Features](#intro--features)\n- [Getting Started](#getting-started)\n  - [Installation](#installation)\n  - [Importing and Loading](#importing-and-loading)\n- [Creating Incidents](#creating-incidents)\n  - [ZoomTo](#zoomto)\n  - [FollowPath](#followpath)\n- [Adding Incidents in your clip](#adding-incidents-in-your-clip)\n- [Contributing](#contributing)\n- [License](#license)\n- [Sponsored by](#sponsored-by)\n\n## Demo\n\n[Check it out here](https://donkeyclip.github.io/motorcortex-2dcam/demo/)\n\n# Intro / Features\n\nMotorCortex-2dcam acts exactly as a 2d camera that can focus and zoom at\nany given point of any element.\nYou can move your camera around, zoom in and out, follow paths, all\nvia its easy to use Incidents.\n\nThis Plugin exposes two Incidents:\n- ZoomTo\n- FollowPath\n\n# Getting Started\n\n## Installation\n\n```bash\n$ npm install --save @donkeyclip/motorcortex-2dcam\n# OR\n$ yarn add @donkeyclip/motorcortex-2dcam\n```\n\n## Importing and loading\n\n```javascript\nimport { loadPlugin } from \"@donkeyclip/motorcortex\";\nimport TDCAMDef from \"@donkeyclip/motorcortex-2dcam\";\nconst TDCAM = loadPlugin(TDCAMDef);\n```\n\n# Creating Incidents\n\n## ZoomTo\n\nAny element can be selected by ZoomTo Incident and the camera will zoom\nto any of its points, on any duration and by any easing.\nOur viewport is always considered the parent of our target element. The\nvirtual camera will zoom to the given point of our target and will bring it in the middle\nof our viewport, in the middle of its parent element, zoomed as per attributes passed.\n\n```javascript\nconst zoomto = new TDCAM.ZoomTo(\n  {\n    animatedAttrs: {\n      position: {\n        x: 1280, // pixel 1280\n        y: 150, // pixel 150\n        zoom: 1.2, // zoom level, from 0 to inf., 1:1 with scale\n      },\n    },\n  },\n  {\n    selector: \".img\",\n    duration: 4000,\n    easing: \"easeInOutSine\",\n  }\n);\n```\n\n#### IMPORTANT\n\nThe element that you want to zoom to (any element that you target via your selector) must have `transform-origin: top left`\n\n### ZoomTo Attrs\nThe expected attributes of ZoomTo include the animatedAttrs. This should contain the animated attribute `position`.\nPosition is a composite attribute consisting of x, y and zoom, where x and y are the coordinates of our selected element we want to focus and zoom the zoom level we want to apply.\nAll, x, y and zoom are optional and if not provided will not be affected during animation.\n\n## FollowPath\n\nInstead of poviding the point we want to focus on and let the camera animate its position\nto it, we can provide (svg) paths, in the form of path definition ([https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d]). \nFor this instead of using ZoomTo and providing x, y and zoom to define the target position of the camera,\nyou can use FollowPath and just provide a path that you want your camera to follow and your final zoom\nlevel.\n\n```javascript\nconst fpath = new TDCAM.FollowPath(\n  {\n    animatedAttrs: {\n      position: {\n        path: \"M 1280 150 L 1380 464\",\n        zoom: 1.2,\n      },\n    },\n    from: 0.2,\n    to: 0.9,\n    transition: 1000,\n  },\n  {\n    duration: 3000,\n    selector: \".img\",\n    easing: \"easeOutCubic\",\n  }\n);\n```\n### FollowPath Attrs\nAs you can see in the example, on our animatedAttrs we again used the position attribute but this\ntime we passed instead of x and y the `path` which we want our camera to follow.\n\nIf you want your camera to move only on a part of a path you can use the `from` and `to` attributes\nthat define the fraction (0 to 1) that you want your start and end point to be. E.g. if you\nprovide the values `from: 0.2` and `to: 0.9` then the camera will start from the 20% of the path's overall length and\nwill animate all the way to the 90% of its length. Of course, both start and end are optional and have\ndefault values 0 and 1 respectively.\n\nAs we are moving our camera along a path, at the 0 millisecond of our Incident our camera will be placed on\nthe very first point of the provided path. This can cause a \"jump\" effect as the camera will\nmove to point 0 without animation. In order to handle this the `transition` attribute\nis provided. If provided, transition defines (in milliseconds) an optional transition time from the current\ncamera position to point 0 of our path, so we avoid the jump. If provided then the camera will linearly move from\nthe current camera position to the point 0 position in the given milliseconds. The total duration of the\nIncident will not be affected as the movement on the actual path will be\nless by \"transition\" milliseconds. \"transition\" of course is optional with default value = 0.\n\n# Adding Incidents in your clip\n\n```javascript\nclipName.addIncident(incidentName,startTime);\n```\n\n# Contributing \n\nIn general, we follow the \"fork-and-pull\" Git workflow, so if you want to submit patches and additions you should follow the next steps:\n1.\t**Fork** the repo on GitHub\n2.\t**Clone** the project to your own machine\n3.\t**Commit** changes to your own branch\n4.\t**Push** your work back up to your fork\n5.\tSubmit a **Pull request** so that we can review your changes\n\n\n# License\n\n[MIT License](https://opensource.org/licenses/MIT)\n\n# Sponsored by\n[\u003cimg src=\"https://presskit.donkeyclip.com/logos/donkey%20clip%20logo.svg\" width=250\u003e\u003c/img\u003e](https://donkeyclip.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonkeyclip%2Fmotorcortex-2dcam","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdonkeyclip%2Fmotorcortex-2dcam","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonkeyclip%2Fmotorcortex-2dcam/lists"}