https://github.com/ikcede/animation-studio

Load and modify animations by keyframe
https://github.com/ikcede/animation-studio

animation css editor keyframes nextjs react

Last synced: 4 days ago
JSON representation

Load and modify animations by keyframe

• Host: GitHub
• URL: https://github.com/ikcede/animation-studio
• Owner: ikcede
• License: gpl-3.0
• Created: 2024-08-09T06:18:09.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-09-18T08:06:51.000Z (2 months ago)
• Last Synced: 2024-09-18T10:42:11.102Z (2 months ago)
• Topics: animation, css, editor, keyframes, nextjs, react
• Language: TypeScript
• Homepage: https://css-animation-studio.vercel.app
• Size: 444 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Animation Studio



    



Check out the [live demo](https://css-animation-studio.vercel.app/)!

Animation Studio was originally conceived as a library to store and quickly customize cool text animations. Eventually, scope creep led to the addition of modular keyframe editing, animation tuning, and html customization features, resulting in an entire editing studio for animations.

Since this is a project I built for fun in about a month, I don't intend to fully support it going forward, but I'll be looking to add animations and features here and there.

## TODOS

Next:

- Fix mobile view editor width

- Fix zoom in on text fields on mobile

Backlog:

- Keyframes:

  - Edit keyframe from keyframe view

  - Go from property to value on ":" keydown

  - Support keyframe codemirror editor

  - Allow for higher precision keyframe values

- Library:

  - Add new animations to lib

  - Search to filter animations

- Animations:

  - Clean up longform CSS string outputs

  - Support linear() timing functions

  - Support composite keyframes and animations

- Timeline:

  - Speed mods

  - Mobile drag keyframes support

- General:

  - Saving + Projects

  - Keyboard shortcuts

## Getting Started

To run the dev server:

```bash

npm run dev

```

Before deploying:

```bash

npm test

npm run build

```