IN PROGRESS - 🎨 Web-based GSAP Timeline Visual Editor

Version: Beta 1.0

Development started at: 1st August 2022

👋 Introduction

It is a single page application (SPA) that:

• visualizes GSAP animation editing (GSAP GUI)
• preview the animation without coding
• enables users to generate GSAP JavaScript code after creating timeline-based animation

What is GSAP?

The GreenSock Animation Platform (GSAP for short) is a powerful JavaScript library that enables front-end developers and designers to create robust timeline based animations.

Tech Stack:

1. Next.js
2. TypeScript
3. Node.js
4. MongoDB

📃 Objectives:

• simplify the process of creating GSAP timeline based animation
• promote GSAP
• earn side income with Google AdSense

💼 Functional requirements:

MVP

1. Create/edit timeline based animation
2. Able to animate heading, text and image
3. Preview animation without converting
4. Convert animation to JS code
5. Guiding tip for GSAP attributes and functions

Next stage

1. Authentication
2. Enable autosave for registered users
3. Able to read keyboard shortcuts
4. Able to read JS code and convert it into animation
5. Available for Vanilla JavaScript and React
6. Pre-built elements to animate

💼 Non-functional requirements:

1. High SEO performance
2. Responsive design
3. Animation duration limit up to 1 minutes
4. Objects to animate limit up to 99 layers

👀 Similar applications on market:

1. Adobe Premiere Pro
2. Canva
3. Draw.io