Gsap Timeline Ui

A timeline interface for Gsap.

Features

Gsap Ui shows the current state of your gsap timeline to help when creating animations.

The current timeline state will be saved in LocalStorage,
to allow for seamles animation code editing.

Shortcuts

• Spacebar Toggle Play / Pause
• → Skip forward
• ← Skip forward
• = / + Faster
• - Slower
• R Reset timescale

Setup

Pass your gsap timeline to the GsapUi:

var timeline = new TimelineMax();
tl.to(timeline, 2, {
  opacity: 0,
});

new GsapUi(timline);

Load with a module bundler

Install the gsap-ui package:

npm install --save-dev gsap-ui

Require gsap-ui with your module bundler of choice:

// ES6 Modules
import GsapUi from 'gsap-ui';

// CommonJS
var GsapUi = require('gsap-ui');