https://github.com/xzdarcy/react-timeline-editor

react-timeline-editor is a react component used to quickly build a timeline animation editor.
https://github.com/xzdarcy/react-timeline-editor

animation editor react

Last synced: about 2 months ago
JSON representation

react-timeline-editor is a react component used to quickly build a timeline animation editor.

• Host: GitHub
• URL: https://github.com/xzdarcy/react-timeline-editor
• Owner: xzdarcy
• License: mit
• Created: 2022-02-19T15:54:31.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2024-03-27T14:20:47.000Z (over 1 year ago)
• Last Synced: 2025-05-09T01:03:33.898Z (about 2 months ago)
• Topics: animation, editor, react
• Language: TypeScript
• Homepage: https://zdarcy.com/
• Size: 18.2 MB
• Stars: 473
• Watchers: 9
• Forks: 128
• Open Issues: 39
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Timeline Editor

[![npm version](https://img.shields.io/npm/v/@xzdarcy/react-timeline-editor.svg?style=flat-square)](https://www.npmjs.com/package/@xzdarcy/react-timeline-editor)

[![npm downloads](https://img.shields.io/npm/dm/@xzdarcy/react-timeline-editor.svg?style=flat-square)](https://www.npmjs.com/package/@xzdarcy/react-timeline-editor)

**[React Timeline Editor](https://zdarcy.com/)** is a react component used to quickly build a timeline animation editor.

![example](https://github.com/xzdarcy/react-timeline-editor/blob/f79d85eee8a723e5210c04232daf2c51888418c0/public/assets/timeline.gif)

## Getting Started

```bash

npm install @xzdarcy/react-timeline-editor

```

```ts

import { Timeline, TimelineEffect, TimelineRow } from '@xzdarcy/react-timeline-editor';

import React from 'react';

const mockData: TimelineRow[] = [{

    id: "0",

    actions: [

      {

        id: "action00",

        start: 0,

        end: 2,

        effectId: "effect0",

      },

    ],

  },

  {

    id: "1",

    actions: [

      {

        id: "action10",

        start: 1.5,

        end: 5,

        effectId: "effect1",

      }

    ],

}]

const mockEffect: Record = {

  effect0: {

    id: "effect0",

    name: "效果0",

  },

  effect1: {

    id: "effect1",

    name: "效果1",

  },

};

const TimelineEditor = () => {

  return (

      

  );

};

```

## Documention

Checkout the [Docs](https://zdarcy.com/) for a demonstration of some basic and advanced features.