{"id":13725997,"url":"https://github.com/nitin42/Animated-Timeline","last_synced_at":"2025-05-07T21:31:01.034Z","repository":{"id":87329935,"uuid":"125880381","full_name":"nitin42/Animated-Timeline","owner":"nitin42","description":"🔥 Create timeline and playback based animations in React","archived":false,"fork":false,"pushed_at":"2018-05-07T07:44:19.000Z","size":22631,"stargazers_count":196,"open_issues_count":0,"forks_count":9,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-11-10T00:12:03.696Z","etag":null,"topics":["animations","bezier","graphics","playback","react","timeline","web"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nitin42.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2018-03-19T15:33:03.000Z","updated_at":"2024-08-29T00:11:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"f5819e18-711f-4c52-ae1d-3cb2b061d311","html_url":"https://github.com/nitin42/Animated-Timeline","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2FAnimated-Timeline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2FAnimated-Timeline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2FAnimated-Timeline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2FAnimated-Timeline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nitin42","download_url":"https://codeload.github.com/nitin42/Animated-Timeline/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224654061,"owners_count":17347662,"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":["animations","bezier","graphics","playback","react","timeline","web"],"created_at":"2024-08-03T01:02:46.470Z","updated_at":"2024-11-14T16:33:07.383Z","avatar_url":"https://github.com/nitin42.png","language":"JavaScript","readme":"# Animated Timeline\n\n![author](https://img.shields.io/badge/author-Nitin%20Tulswani-blue.svg) ![size](https://img.shields.io/badge/size-35.5%20KB-brightgreen.svg) [![Build Status](https://travis-ci.org/nitin42/Timeline.svg?branch=beta0)](https://travis-ci.org/nitin42/Timeline)\n\n\u003e Create playback based animations in React\n\n## Table of contents\n\n* [Introduction](#introduction)\n\n* [Another animation library ?](#another-animation-library)\n\n* [Features](#features)\n\n* [Performance](#performance)\n\n* [Install](#install)\n\n* [Browser support](#browser-support)\n\n* [Usage](#usage)\n\n* [Animation types](#animation-types)\n\n* [Animation values](#animation-values)\n\n* [Documentation](#documentation)\n\n* [Todos](#todos)\n\n## Introduction\n\n**animated-timeline** is an animation library (not really) for React which makes it painless to create playback based animations.\n\n## Another animation library ?\n\nNope! Though you can use it as a library. The main goal of this project is to provide -\n\n* utilities to create animation tools\n\n* low-level APIs to create a fitting abstraction on top of this project\n\n* APIs for composing animations that transition from one state to another, use loops, callbacks and timer APIs to create interactive animations\n\n## Concepts\n\n`animated-timeline` works on two models, timing and animation model.\n\n### Timing model\n\nTiming model manages the time and keeps track of current progress in a timeline.\n\n### Animation model\n\nAnimation model, on the other hand, describes how an animation could look like at any give time or it can be thought of as state of an animation at a particular point of time.\n\nUsing both the models, we can synchronize the timing and visual changes to the document.\n\n## Features\n\n* Controls for time-based execution of an animation\n\n* Create sequence based animations\n\n* Timing based animations\n\n* Change the animation position along the timeline by seeking the animation\n\n* Keyframes\n\n* Promise based APIs\n\n* Interactive animations based on changing inputs\n\n* Spring physics and bounciness\n\n## Performance\n\nStyle mutations and style reads are batched internally to speed up the performance and avoid document reflows.\n\n## Install\n\n```\nnpm install animated-timeline\n```\n\nor if you use yarn\n\n```\nyarn add animated-timeline\n```\n\n**This project also depends on `react` and `react-dom` so make sure you've them installed.**\n\n## Browser support\n\n| Chrome | Safari | IE / EDGE | Firefox | Opera |\n| ------ | :----: | --------: | ------: | ----: |\n| 24+    |   6+   |       10+ |     32+ |   15+ |\n\n## Usage\n\n`animated-timeline` provides three ways to do animations:\n\n* [Component API](./docs/Component.md)\n\n* [Timeline API](./docs/Timeline.md)\n\n* [Spring physics API](./docs/Spring.md)\n\n**Example usage with component API**\n\n```js\nimport React from 'react'\nimport { Animate, helpers } from 'animated-timeline'\n\nconst styles = {\n  width: '20px',\n  height: '20px',\n  backgroundColor: 'pink'\n}\n\n// Properties for timing model\nconst timingProps = {\n  duration: 1000\n}\n\n// Properties for animation model\nconst animationProps = {\n  rotate: helpers.transition({ from: 360, to: 180 })\n}\n\nfunction App() {\n  return (\n    \u003cAnimate timingProps={timingProps} animationProps={animationProps}\u003e\n      \u003cdiv style={styles} /\u003e\n    \u003c/Animate\u003e\n  )\n}\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./media/Animate.gif\" /\u003e\n\u003c/p\u003e\n\n[Read the detailed API reference for Component API](./docs/Component.md)\n\n**Example usage with `Timeline` API**\n\n```js\nimport React from 'react'\nimport { createTimeline, helpers } from 'animated-timeline'\n\nconst styles = {\n  width: '20px',\n  height: '20px',\n  backgroundColor: 'pink'\n}\n\nconst t = createTimeline({\n  direction: 'alternate',\n  iterations: 1\n})\n\nclass App extends React.Component {\n  componentDidMount() {\n    t\n      .animate({\n        opacity: helpers.transition({ from: 0.2, to: 0.8 }),\n        rotate: helpers.transition({ from: 360, to: 180 })\n      })\n      .start()\n  }\n\n  render() {\n    return \u003ct.div style={styles} /\u003e\n  }\n}\n```\n\n[Read the detailed API reference for `Timeline` API](./docs/Timeline.md)\n\n**Example usage with spring physics**\n\n```js\nimport React from 'react'\n\nimport { Spring } from 'animated-timeline'\n\nconst styles = {\n  width: '20px',\n  height: '20px',\n  backgroundColor: 'pink'\n}\n\nconst s = Spring({ friction: 4, tension: 2 })\n\n// or\n\n// const s = Spring({ bounciness: 14, speed: 12 })\n\nclass SpringSystem extends React.Component {\n  componentDidMount() {\n    s.animate({\n      property: 'scale',\n      map: {\n        inputRange: [0, 1],\n        outputRange: [1, 1.5]\n      }\n    })\n  }\n\n  render() {\n    return (\n      \u003cs.div\n        onMouseUp={() =\u003e s.setValue(0)}\n        onMouseDown={() =\u003e s.setValue(1)}\n        style={styles}\n      /\u003e\n    )\n  }\n}\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./media/spring.gif\" /\u003e\n\u003c/p\u003e\n\n[Read the detailed API reference for spring physics](./docs/Spring.md)\n\n## Animation types\n\n### Sequence based animations\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./media/sequence.gif\" /\u003e\n\u003c/p\u003e\n\n[![Edit 6j08xylw7n](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/6j08xylw7n)\n\n### Timing based animations\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./media/timing.gif\" /\u003e\n\u003c/p\u003e\n\n[![Edit 92lm0xrl44](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/92lm0xrl44)\n\n### Staggered animation\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./media/staggered.gif\" /\u003e\n\u003c/p\u003e\n\n[![Edit 743n1z9826](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/743n1z9826)\n\n### Keyframes\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./media/keyframes.gif\" /\u003e\n\u003c/p\u003e\n\n[![Edit 92lm0xrl44](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/92lm0xrl44)\n\n### Changing the animation position\n\nYou can also change the animation position along its timeline with an input value.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./media/mover.gif\" /\u003e\n\u003c/p\u003e\n\n[![Edit kkjn9jq6k7](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/kkjn9jq6k7)\n\n### Spring based animations\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./media/spring.gif\" /\u003e\n\u003c/p\u003e\n\n[![Edit 75l1z6jzq](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/75l1z6jzq)\n\n### More examples\n\n* [Using animation lifecycle hooks](./examples/Lifecycle/index.js)\n\n* [Using promise based APIs to manage `completion` and `cancellation` events for an animation](./examples/Promise/index.js)\n\n* [Using timer APIs to perform Animation](./examples/Extra/speed.js)\n\n## Animation values\n\n* **For transforms**\n\n```js\nt.animate({\n  scale: 1,\n  rotateX: '360deg' // with or without unit\n})\n```\n\n* **For css properties**\n\n```js\nt.animate({\n  width: '20px'\n})\n```\n\n* **Defining values using objects**\n\n```js\nt.animate({\n  rotate: {\n    value: 360, // 360deg\n    duration: 3000,\n    delay: 200,\n    direction: 'alternate'\n  }\n})\n```\n\nCheck out [this](./docs/properties) list to see which properties you can use when defining the animation values using objects.\n\n* **`from` - `to` based animation values**\n\n```js\nimport { helpers } from 'animated-timeline'\n\nt.animate({\n  scale: helpers.transition({ from: 2, to: 1 })\n})\n```\n\nRead more about `helpers` object [here](./docs/helpers.md).\n\n* **Timing based animation values**\n\nUse property `offset` to perform timing animations\n\n```js\nimport { helpers } from 'animated-timeline'\n\nt\n  .sequence([\n    t.animate({\n      el: '.one',\n      scale: 2\n    }),\n\n    t.animate({ el: '.two', scale: 1, offset: helpers.startAfter(2000) })\n  ])\n  .start()\n```\n\nYou can set a value for a property with or without any unit such as `px`, `em`, `rem`, `in`, `cm`, `mm`, `vw`, `vh`, `vmin`, `vmax`, `deg`, `rad`, `turn` etc.\n\n## Documentation\n\n[Check out the detailed documentation for `animated-timeline`.](./docs)\n\n## Todos\n\n* [ ] ReasonML port of the core engine\n\n* [ ] timing model based on scroll position and gestures ?\n\n* [ ] Synchronize engine time with speed coefficient\n\n* [ ] Refactor tween data structure for more flexibility\n\n* [x] Use data binding\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitin42%2FAnimated-Timeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnitin42%2FAnimated-Timeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitin42%2FAnimated-Timeline/lists"}