{"_id":"@brava-apps/blits-animation-plugin","_rev":"6-89b45a7044e5f6d6e5b0252f26d819f7","name":"@brava-apps/blits-animation-plugin","dist-tags":{"latest":"1.4.0"},"versions":{"0.1.0":{"name":"@brava-apps/blits-animation-plugin","version":"0.1.0","keywords":["blits","lightning","animation","plugin","timeline","sequence"],"author":{"name":"BravaApps","email":"hi@bravaapps.com"},"license":"Apache-2.0","_id":"@brava-apps/blits-animation-plugin@0.1.0","maintainers":[{"name":"danielbrava","email":"daniel@bravaapps.com"}],"dist":{"shasum":"a984526016b59ad69686924ebb5bc8416a99f39f","tarball":"https://registry.npmjs.org/@brava-apps/blits-animation-plugin/-/blits-animation-plugin-0.1.0.tgz","fileCount":3,"integrity":"sha512-RyWguh7Rv07dKFm9FWDk5VWYrlUmVhe94P49Bqz0gNagwiygTCUQGhRVlyS/LqkGYKGIEoMLNHGfV8DMCD7d5A==","signatures":[{"sig":"MEUCIQCclWBa+F0nmxHJQzIIx/30q+gfaFOEosRvMeOdxP4CuAIgJTUtz/NUNqfAAaL4xOcPztIjvbG9ExE8fXTVxSu9eDI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6388},"main":"./src/index.js","type":"module","module":"./src/index.js","exports":{".":"./src/index.js"},"gitHead":"775713bcd89e48c668666d02a3fe4b96602de9b3","_npmUser":{"name":"danielbrava","email":"daniel@bravaapps.com"},"_npmVersion":"10.8.2","description":"Animation plugin for Blits","directories":{},"sideEffects":false,"_nodeVersion":"22.5.1","_hasShrinkwrap":false,"peerDependencies":{"@lightningjs/blits":"*"},"_npmOperationalInternal":{"tmp":"tmp/blits-animation-plugin_0.1.0_1778073099164_0.9507187613478572","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"@brava-apps/blits-animation-plugin","version":"1.0.0","keywords":["blits","lightning","animation","plugin","timeline","sequence"],"author":{"name":"BravaApps","email":"hi@bravaapps.com"},"license":"Apache-2.0","_id":"@brava-apps/blits-animation-plugin@1.0.0","maintainers":[{"name":"danielbrava","email":"daniel@bravaapps.com"}],"dist":{"shasum":"840d3686af021b400ba4ab4f107e1b203b450e95","tarball":"https://registry.npmjs.org/@brava-apps/blits-animation-plugin/-/blits-animation-plugin-1.0.0.tgz","fileCount":3,"integrity":"sha512-aNCatD7IbTpyefw+SilitITmRWsc60oXLY8w0bYDj8yuPgOKbWYMb2ZRENUBhoeBPB8nLXroDgsR3Wv4jyV4dw==","signatures":[{"sig":"MEUCIQCVEOGIFKkf3y0TbEktbh1e1rxrWnOo9mwENwpMqvVp5gIgO70t5YjxFfq+xkP9eEHHKLnCL+jkRrPY/RekqAXSS9E=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12948},"main":"./src/index.js","type":"module","module":"./src/index.js","exports":{".":"./src/index.js","./frame-tick":"./src/index.js"},"gitHead":"42069df46bcc30b253f419455bbf96e55137ccc7","_npmUser":{"name":"danielbrava","email":"daniel@bravaapps.com"},"_npmVersion":"10.8.2","description":"Animation plugin for Blits","directories":{},"sideEffects":false,"_nodeVersion":"22.5.1","_hasShrinkwrap":false,"peerDependencies":{"@lightningjs/blits":"*"},"_npmOperationalInternal":{"tmp":"tmp/blits-animation-plugin_1.0.0_1787652319861_0.5225338700361322","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@brava-apps/blits-animation-plugin","version":"1.1.0","keywords":["blits","lightning","animation","plugin","timeline","sequence"],"author":{"name":"BravaApps","email":"hi@bravaapps.com"},"license":"Apache-2.0","_id":"@brava-apps/blits-animation-plugin@1.1.0","maintainers":[{"name":"danielbrava","email":"daniel@bravaapps.com"}],"dist":{"shasum":"c5e949a0bad22c2c8b0deb64ccd84b1af171690a","tarball":"https://registry.npmjs.org/@brava-apps/blits-animation-plugin/-/blits-animation-plugin-1.1.0.tgz","fileCount":3,"integrity":"sha512-Iz9ngTE2zWISCO7S/E9tp60EH6VEKEtdfE3CSJW/rvCTQvu+Swqn0PagFuDaGW7JKJI/YoW/JZCR2toj0WoJmw==","signatures":[{"sig":"MEUCIEZLwRELMEA4/eeBTZ3Tm4KAiXAHTGkHgYSAqJ42rh5/AiEA47ltZG7SajTIwKYH4odAkMllfl1b6S6nC7kCAig5C3g=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":15539},"main":"./src/index.js","type":"module","module":"./src/index.js","exports":{".":"./src/index.js","./frame-tick":"./src/index.js"},"gitHead":"a093d50814c85c992c1d0688f8dc50fbe508871b","scripts":{"docs:examples:build":"npm run build --prefix docs/examples/basic","docs:examples:install":"npm install --prefix docs/examples/basic"},"_npmUser":{"name":"danielbrava","email":"daniel@bravaapps.com"},"_npmVersion":"10.8.2","description":"Animation plugin for Blits","directories":{},"sideEffects":false,"_nodeVersion":"22.5.1","_hasShrinkwrap":false,"peerDependencies":{"@lightningjs/blits":"*"},"_npmOperationalInternal":{"tmp":"tmp/blits-animation-plugin_1.1.0_1788294774924_0.03181525747333058","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@brava-apps/blits-animation-plugin","version":"1.2.0","keywords":["blits","lightning","animation","plugin","timeline","sequence"],"author":{"name":"BravaApps","email":"hi@bravaapps.com"},"license":"Apache-2.0","_id":"@brava-apps/blits-animation-plugin@1.2.0","maintainers":[{"name":"danielbrava","email":"daniel@bravaapps.com"}],"dist":{"shasum":"2612aed9b611f0526867b556eb7424e3e7b4d602","tarball":"https://registry.npmjs.org/@brava-apps/blits-animation-plugin/-/blits-animation-plugin-1.2.0.tgz","fileCount":3,"integrity":"sha512-I533aQ5kuxVy9RtzUc1nxYZ8Jcot30rHmfbr7EH8/VL+UsG7+t3+HDHuZOZmqbuk5hBplL0eXQDqfhHzamyPLw==","signatures":[{"sig":"MEYCIQCMum71arwtrbONa/sXGe80TV1kDENiqBPVBQR67WRltAIhANuCmbKKMfVlWxD31gAZ4OtfilewGczYhHWK7Snd4Zgt","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":17879},"main":"./src/index.js","type":"module","module":"./src/index.js","exports":{".":"./src/index.js","./frame-tick":"./src/index.js"},"gitHead":"9983eb8145fe8975e9660e5a04331daa8d10db8f","scripts":{"docs:examples:build":"npm run build --prefix docs/examples/basic","docs:examples:install":"npm install --prefix docs/examples/basic"},"_npmUser":{"name":"danielbrava","email":"daniel@bravaapps.com"},"_npmVersion":"10.8.2","description":"Animation plugin for Blits","directories":{},"sideEffects":false,"_nodeVersion":"22.5.1","_hasShrinkwrap":false,"peerDependencies":{"@lightningjs/blits":"*"},"_npmOperationalInternal":{"tmp":"tmp/blits-animation-plugin_1.2.0_1788771664768_0.340472079841071","host":"s3://npm-registry-packages-npm-production"}},"1.3.0":{"name":"@brava-apps/blits-animation-plugin","version":"1.3.0","keywords":["blits","lightning","animation","plugin","timeline","sequence"],"author":{"name":"BravaApps","email":"hi@bravaapps.com"},"license":"Apache-2.0","_id":"@brava-apps/blits-animation-plugin@1.3.0","maintainers":[{"name":"danielbrava","email":"daniel@bravaapps.com"}],"dist":{"shasum":"7aefa64b2f7a092a0138ca973d3d7f42461116db","tarball":"https://registry.npmjs.org/@brava-apps/blits-animation-plugin/-/blits-animation-plugin-1.3.0.tgz","fileCount":3,"integrity":"sha512-Tu5a0MOEXLAqDRd3OlK4VVgh/IHtNyXBmu2hiYnZs6mq5YBVg8UaXIBox/ryljJ21cdzfSufET4fZLtz9l4vCQ==","signatures":[{"sig":"MEUCIQDHACBN43VYJEmT0ajjPs1QQZozaeeRURAGhNtibqXxugIgIR3wIDy0rOwi8zgmN4HwZpfb8KolGCr1mtFes4Ayoe8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"sig":"MEUCIQDYpu9uvV8oNY/oCxyqKNta4/NyVLkcrewCXlSyYB9UEwIgeDaZWh313M6aUqlx+2mv30kCaSyYZsMcVjnSEc6FFzo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":21280},"main":"./src/index.js","type":"module","module":"./src/index.js","exports":{".":"./src/index.js","./frame-tick":"./src/index.js"},"gitHead":"b5ea5114be89b3c207d4a1dcbf6a69f842efe211","scripts":{"docs:examples:build":"npm run build --prefix docs/examples/basic","docs:examples:install":"npm install --prefix docs/examples/basic"},"_npmUser":{"name":"danielbrava","email":"daniel@bravaapps.com"},"_npmVersion":"10.8.2","description":"Animation plugin for Blits","directories":{},"sideEffects":false,"_nodeVersion":"22.5.1","_hasShrinkwrap":false,"peerDependencies":{"@lightningjs/blits":"^2.10.0"},"_npmOperationalInternal":{"tmp":"tmp/blits-animation-plugin_1.3.0_1790078976177_0.2710571932960031","host":"s3://npm-registry-packages-npm-production"}},"1.4.0":{"_id":"@brava-apps/blits-animation-plugin@1.4.0","dist":{"shasum":"bfeb497a7c244b29d3294a5e52eb6577c260e122","tarball":"https://registry.npmjs.org/@brava-apps/blits-animation-plugin/-/blits-animation-plugin-1.4.0.tgz","fileCount":3,"integrity":"sha512-ylJ4u3yskKA9+E4u7P+B/ezs8brTs3q3+/y8VIpHGHzbu+DGvIn1auLVQARyZUXQHoSWAwhmrQhM4QqSeA3Wmg==","signatures":[{"sig":"MEYCIQD4TlDgC9cs0eDPTGgo09Z2P0lZJnxGGy5QbGo/ZTmR+wIhANgVpI2SdlB3xg/z/AphuJheRNR2JvweALLzhv/tgXU1","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDmU5CJsY7iMvV13DCAst6HjM0iQ06HqO0WRby1oY9plQIhALIZNBlIkxK+0lfb2bg27z/iRitY6Zb2aHljHVoF//vS"}],"unpackedSize":26356},"main":"./src/index.js","name":"@brava-apps/blits-animation-plugin","type":"module","author":{"name":"BravaApps","email":"hi@bravaapps.com"},"module":"./src/index.js","exports":{".":"./src/index.js","./frame-tick":"./src/index.js"},"gitHead":"f5804dab6e323ad318e4498f29000da994bede94","license":"Apache-2.0","scripts":{"docs:examples:build":"npm run build --prefix docs/examples/basic","docs:examples:install":"npm install --prefix docs/examples/basic"},"version":"1.4.0","_npmUser":{"name":"danielbrava","email":"daniel@bravaapps.com"},"keywords":["blits","lightning","animation","plugin","timeline","sequence"],"_npmVersion":"10.8.2","description":"Animation plugin for Blits","directories":{},"maintainers":[{"name":"danielbrava","email":"daniel@bravaapps.com"}],"sideEffects":false,"_nodeVersion":"22.5.1","_hasShrinkwrap":false,"peerDependencies":{"@lightningjs/blits":"^2.10.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/blits-animation-plugin_1.4.0_1790864637973_0.8355655665504285"}}},"time":{"created":"2026-05-06T13:11:39.004Z","modified":"2026-10-01T14:23:58.241Z","0.1.0":"2026-05-06T13:11:39.313Z","1.0.0":"2026-08-25T10:05:20.010Z","1.1.0":"2026-09-01T20:32:55.045Z","1.2.0":"2026-09-07T09:01:04.905Z","1.3.0":"2026-09-22T12:09:36.299Z","1.4.0":"2026-10-01T14:23:58.056Z"},"author":{"name":"BravaApps","email":"hi@bravaapps.com"},"license":"Apache-2.0","keywords":["blits","lightning","animation","plugin","timeline","sequence"],"description":"Animation plugin for Blits","maintainers":[{"name":"danielbrava","email":"daniel@bravaapps.com"}],"readme":"# Animation plugin for Blits\n\n## Getting started\n\nFirst install the Animation plugin from NPM in your App project\n\n```sh\nnpm install @brava-apps/blits-animation-plugin\n```\n\nThe plugin requires Blits 2.10.0 or later within the 2.x release line.\n\nThen in the `index.js` register the Animation plugin\n\n```js\nimport Blits from '@lightningjs/blits'\nimport AnimationPlugin from '@brava-apps/blits-animation-plugin'\nimport App from './App.js'\n\nBlits.Plugin(AnimationPlugin)\n\nBlits.Launch(App, 'app', {\n  // launch settings\n})\n```\n\nInitialize the plugin with the renderer from the root application. The plugin uses the renderer's\nframe tick to update active animations. This initialization is required before calling\n`animate()`, `sequence()` or `timeline()`.\n\n```js\nimport Blits from '@lightningjs/blits'\n\nexport default Blits.Application({\n  // application config\n  hooks: {\n    init() {\n      this.$animate.init(this)\n    },\n  },\n})\n```\n\nNext you can use the plugin from any component via `this.$animate`\n\n## Basic plugin usage\n\nThe Animation plugin has 3 public animation methods: `this.$animate.animate()`,\n`this.$animate.sequence()`, and `this.$animate.timeline()`.\n\nAll three methods start immediately and return an awaitable animation controller.\n\n`animate()` accepts any property that Blits can set, but interpolation requires an interpolatable\nvalue. Numeric values are interpolated directly.\n\n### Color animations\n\nAll three methods support solid `color` values. Use packed `0xRRGGBBAA` numbers or strings,\n`#RGB`, `#RRGGBB`, `#RRGGBBAA`, or HTML color names such as `red` and `transparent`.\nRGBA channels are interpolated separately, with color easing clamped to avoid overshoot.\nGradient objects and shader colors are not supported at the moment.\n\n```js\nconst animation = this.$animate.sequence([\n  { element: this.$select('logo'), prop: 'x', value: 800, duration: 1000 },\n])\n\nanimation.pause()\nanimation.resume()\nanimation.cancel() // stops and resolves normally\nanimation.reset() // also restores the original property values\n\nawait animation\n```\n\n### Animate\n\n`this.$animate.animate()` animates multiple properties on one or more Elements or Components at the\nsame time. Its signature is `animate(targets, properties, options?)`.\n\n```js\nawait this.$animate.animate(\n  this.$select('logo'),\n  {\n    x: 800,\n    alpha: { from: 0, to: 1 },\n    scale: 1.1,\n    color: { from: '#f00', to: '#00f' },\n  },\n  { duration: 500, delay: 100, easing: 'ease-out' }\n)\n```\n\n### Sequence\n\n`this.$animate.sequence()` is a async function for doing animation steps in a sequence. The first parameter is for the `steps` and is a Array with objects with animation instructions for every step.\n\nWhen a step is finish, the next step will start.\n\nThe animation step object has:\n\n- `element` - the `ref` to Element in the template\n- `prop` - the name of the prop to do animation\n- `value` - the value to do the animation to\n- `duration` - the duration of the animation in `ms`\n- `easing` (optional) - the easing function to use in the animation\n\n```js\nawait this.$animate.sequence([\n  { element: this.$select('logo'), prop: 'x', value: 800, duration: 1000 },\n  { element: this.$select('logo'), prop: 'y', value: 100, duration: 600, easing: 'ease-in-out-back' },\n  { element: this.$select('title'), prop: 'rotation', value: 720, duration: 1200}\n])\n```\n\n### Timeline\n\n`this.$animate.timeline()` is a async function for doing animation steps simultaniously at specific moments in the timeline.\n\nThe first parameter is for `steps` and is a Array with animation step objects. The second parameter is for the duration of the timeline in `ms`.\n\nThe animation step object for the _timeline_ is a bit different then the object for the _sequence_.\n\n- `element` - the `ref` to Element in the template\n- `prop` - the name of the prop to do animation\n- `value` - the value to do the animation to\n- `at` - the relative moment to _start_ the animation step (fraction of the total timeline duration)\n- `duration` - the relative duration of the animation step (fraction of the total timeline duration - NOT `ms`!)\n- `easing` (optional) - the easing function to use in the animation\n\n```js\nawait this.$animate.timeline(\n  [\n    { element: this.$select('logo'), prop: 'x', value: 800, at: 0.1, duration: 0.4 },\n    { element: this.$select('logo'), prop: 'y', value: 300, at: 0.5, duration: 0.3, easing: 'ease-in-out', },\n    { element: this.$select('title'), prop: 'alpha', value: 1, at: 0.2, duration: 0.8 },\n  ],\n  1000\n)\n```\n\n## Animation groups\n\nGroups expose the same `animate`, `sequence`, and `timeline` factories. Store a group as a plain\ncomponent field and dispose it in `hooks.destroy`:\n\n```js\nhooks: {\n  init() {\n    this.animations = this.$animate.group()\n  },\n  ready() {\n    this.animations.animate(this.$select('card'), { alpha: 1 }, { duration: 200 })\n  },\n  destroy() {\n    this.animations.dispose()\n    this.animations = null\n  },\n}\n```\n\n`group.pause()` temporarily pauses running animations and their delays. `group.resume()` continues\nthem, preserving animations paused individually. New animations in a paused group wait too;\ncontroller resume cannot override a group pause. Awaiters keep waiting while paused.\n\n`group.cancel()` permanently stops current running, delayed and paused animations and resolves\ntheir awaiters with a `cancelled` outcome. They cannot resume, but can still reset their values.\nThe group remains reusable and keeps its paused state.\n\n`group.dispose()` stops and releases pending jobs, permanently closes the group, and makes its factories throw. Both preserve current values and settle awaiters with\n`undefined`, without invoking pending step callbacks. Other groups and ungrouped work continue.\n\nControllers also support terminal `animation.dispose()` and read-only `animation.outcome`:\n`null`, `completed`, `cancelled`, `reset`, or `disposed`. The first settlement reason is preserved.\nAfter `await animation`, check `animation.outcome === 'completed'` before completion-only work.\nDisposed controllers retain their promise/outcome, but their mutation methods become no-ops.\n\nCompletion removes jobs from the scheduler and their group automatically. A retained settled\ncontroller still holds targets for `reset()`; disposing its former group does not revisit it.\nDrop the controller or explicitly dispose it when restoration is no longer needed.\n\nSee [the animation groups guide](docs/animation-groups.md) for details. Automatic owner-based cleanup is deferred.\n","readmeFilename":"README.md"}