A timeline interface for Gsap.
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.
- Spacebar Toggle Play / Pause
- → Skip forward
- ← Skip forward
- = / + Faster
- - Slower
- R Reset timescale
Pass your gsap timeline to the GsapUi:
var timeline = new TimelineMax();
tl.to(timeline, 2, {
opacity: 0,
});
new GsapUi(timline);
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');