{"id":16383876,"url":"https://github.com/jakesidsmith/slik","last_synced_at":"2025-03-21T02:31:02.910Z","repository":{"id":1089700,"uuid":"22291634","full_name":"JakeSidSmith/slik","owner":"JakeSidSmith","description":"Animation / tweening library, ideal for use with HTML5 canvas and or React","archived":false,"fork":false,"pushed_at":"2022-12-06T16:32:20.000Z","size":663,"stargazers_count":7,"open_issues_count":16,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-14T22:12:34.252Z","etag":null,"topics":["animation","animation-library","canvas","html5-canvas","tween","tweening"],"latest_commit_sha":null,"homepage":"http://jakesidsmith.github.io/slik/","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/JakeSidSmith.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-07-26T17:07:09.000Z","updated_at":"2023-02-17T13:34:16.000Z","dependencies_parsed_at":"2022-08-16T12:00:34.520Z","dependency_job_id":null,"html_url":"https://github.com/JakeSidSmith/slik","commit_stats":null,"previous_names":["jakesidsmith/flo-js"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JakeSidSmith%2Fslik","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JakeSidSmith%2Fslik/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JakeSidSmith%2Fslik/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JakeSidSmith%2Fslik/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JakeSidSmith","download_url":"https://codeload.github.com/JakeSidSmith/slik/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221811387,"owners_count":16884305,"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":["animation","animation-library","canvas","html5-canvas","tween","tweening"],"created_at":"2024-10-11T04:09:54.080Z","updated_at":"2024-10-28T09:07:21.693Z","avatar_url":"https://github.com/JakeSidSmith.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Slik [![CircleCI](https://circleci.com/gh/JakeSidSmith/slik.svg?style=svg)](https://circleci.com/gh/JakeSidSmith/slik)\n\n**Animation / tweening library, ideal for use with HTML5 canvas and or React** - [Demo](http://jakesidsmith.github.io/slik/)\n\n## About\n\nSlik uses `requestAnimationFrame` to tween values over time. You can give it a single value, an array, or an object. Internally Slik converts these values to [ImmutableJS](https://facebook.github.io/immutable-js/) ones, and returns the tweened values as ImmutableJS objects (unless only a single value is supplied).\n\n\nSlik uses ImmutableJS so that when used with [React](https://facebook.github.io/react/) you can keep your components pure (preventing updates if values have not changed) as ImmutableJS returns a new reference when updated, allowing quick checks for changes using [PureRenderMixin](https://facebook.github.io/react/docs/pure-render-mixin.html) for example.\n\n## Installation\n\nUse npm to install slik.\n\n```shell\nnpm install slik --save --save-exact\n```\n\nI'd recommend pinning to a specific version and using `--save-exact` and `--save` to add this to your package.json automatically.\n\n## Getting started\n\n1. Require slik in the file where you'll be animating.\n\n    ```javascript\n    import Slik from 'slik';\n    ```\n\n1. Setup the values you want to animate. These values can be contained in objects, arrays, or simply be single values. If you're animating a lot of values I'd highly recommend using objects as it makes it easier to refer to your values later.\n\n    Note: these can be nested values.\n\n    ```javascript\n    const initialValues = {\n      headRotation: 0,\n      leftArm: {\n        upper: 0,\n        lower: 0\n      }\n    };\n    ```\n\n1. Create an Animation.\n\n  1. Initial options: You can pass most of your config in here if you like, or add them using the methods with matching names.\n\n      ```javascript\n      const animation = new Slik.Animation({\n        from: initialValues,\n        to: nextValues\n        // Defaults below\n\n        // duration: 500 (milliseconds)\n        // delay: 0 (milliseconds)\n        // fps: 120 (frames per second) I would not recommend changing the frame rate\n        // ease: Slik.Easing.Linear\n        // loop: false\n      });\n      ```\n\n  1. Using methods: Note: fluent API returns the same object for each method (except the `playing` method which returns a boolean). More info below.\n\n      ```javascript\n      const animation = new Slik.Animation()\n        .from(initialValues)\n        .to(nextValues)\n        .duration(1000)\n        .delay(2000)\n        .ease(Slik.Easing.EaseInOutSine)\n        .loop(true);\n      ```\n\n1. Handle changes in values. Bind a callback to the `update` event \u0026 update your component or redraw your canvas.\n\n  1. Canvas example\n\n      ```javascript\n      animation.bind('update', function (values) {\n        canvas.render(values);\n      });\n      ```\n\n  1. React example\n\n      ```javascript\n      componentWillMount () {\n        animation.bind('update', function (values) {\n          this.setState({\n            values: values\n          });\n        });\n      }\n      ```\n\n## Animation methods\n\n1. Set the values to tween from. Default: `Immutable.Map()`.\n\n    ```javascript\n    animation.from({hello: 0});\n    ```\n\n1. Set the values to tween to. Default: `Immutable.Map()`.\n\n    ```javascript\n    animation.to({hello: 1});\n    ```\n\n1. Set the duration of the animation in milliseconds. Default: `500`.\n\n    ```javascript\n    animation.duration(500);\n    ```\n\n1. Set a delay in milliseconds before the animation begins. Default: `0`.\n\n    ```javascript\n    animation.delay(1000);\n    ```\n\n1. Set the frame rate of the animation (fps). Default: `120`.\n  I would not recommend changing this unless you intentionally want a less smooth animation.\n\n    ```javascript\n    animation.fps(120);\n    ```\n\n1. Set the easing function to use for the animation. Default: `Slik.Easing.Linear`.\n  Note: you can easily create your own easing functions. More info on this below.\n\n    ```javascript\n    animation.ease(Slik.Easing.Linear);\n    ```\n\n1. Set whether the animation should automatically loop. Default: `false`.\n\n    ```javascript\n    animation.loop(false);\n    ```\n\n1. Invert the values that you are tweening to. E.g. `{value: 1}` would become `{value: -1}`\n\n    ```javascript\n    animation.invert();\n    ```\n\n1. Swap the from \u0026 to values to play in reverse.\n\n    ```javascript\n    animation.reverse();\n    ```\n\n1. Start the animation. Alias: `play`\n\n    ```javascript\n    animation.start();\n    ```\n\n1. Stop the animation, allowing you to restart from the beginning. Alias: `reset`\n\n    ```javascript\n    animation.stop();\n    ```\n\n1. Pause the animation, allowing you to resume from this point.\n\n    ```javascript\n    animation.pause();\n    ```\n\n1. Return whether the animation is currently playing.\n\n    ```javascript\n    animation.playing();\n    ```\n\n1. Return whether the animation is going to loop.\n\n    ```javascript\n    animation.looping();\n    ```\n\n1. Run a callback once before the animation is initially started (`start` event). Receives the animation's current values.\n  Automatically unbound after triggered or animation stopped.\n\n    ```javascript\n    animation.first(function () {});\n    ```\n\n1. Run a callback once after the animation has completed (`end` event). Receives the animation's current values.\n  Automatically unbound after triggered or animation stopped.\n\n    ```javascript\n    animation.then(function () {});\n    ```\n\n1. Bind a callback to a specific animation event (or all events). Alias: `on`\n  More info on events below.\n\n    ```javascript\n    animation.bind('type', function () {});\n    ```\n\n1. Unbind a callback from a specific animation event (or events). Alias: `off`\n  More info on events below.\n\n    ```javascript\n    animation.unbind('type', function () {});\n    ```\n\n1. Subscribe to an event (like `bind`), and return an unsubscribe function (`unbind`).\n\n    ```javascript\n    var unsubscribe = animation.subscribe('type', function () {});\n\n    unsubscribe();\n    ```\n\n1. Get the current value / values. Alias: `value`\n\n    ```javascript\n    animation.values();\n    ```\n\n## Easing functions\n\nThere are a few easing functions available on `Slik.Easing`.\n\n* Linear\n* EaseInOutSine\n* EaseInSine\n* EaseOutSine\n* Dip\n* Spring\n\n## Events\n\nAll events are called with the current values. These may be the initial values or next values if the animation has only just begun, or has ended.\n\n* `all` - called any time another event is triggered\n* `start` - called when an animation is started\n* `stop` - called when an animation is stopped\n* `pause` - called when an animation is paused\n* `end` - called when an animation completes (excluding loops)\n* `update` - called every frame an animation updates\n* `loop` - called every time an animation loops (if looping)\n\n## Custom easing functions\n\nYou can provide a custom easing function to ease your values.\nThis function is provided with the following values:\n\n* `progress` - a value from 0 to 1 as to how complete the animation is\n* `startTime` - the time in milliseconds that the animation began (from `performance.now`)\n* `now` - the current time in milliseconds (from `performance.now`)\n* `duration` - the duration of the animation in milliseconds\n* `fromValue` - the value to tween from (single values, not objects)\n* `toValue` - the value to tween to (single values, not objects)\n\nThis function simply returns a value from 0 to 1 (or a number outside of this range if you are so inclined), that is used as a multiplier for the values in your animation.\n\nFor example a linear easing function simply returns the progress of the animation.\n\n```javascript\nfunction Linear (progress, startTime, now, duration, fromValue, toValue) {\n  return progress;\n}\n```\n\nMost easing functions can be accomplished simply by returning a variation of the progress value. E.g.\n\n```javascript\nfunction EaseOutSine (progress) {\n  return Math.sin(progress * Math.PI / 2);\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjakesidsmith%2Fslik","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjakesidsmith%2Fslik","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjakesidsmith%2Fslik/lists"}