anim-panel

    2.0.3 • Public • Published

    AnimPanel

    A utility panel to make working with Greensock Animation Platform timeline animations easier.


    Intro

    AnimPanel simplifies the process of building complex timeline-based animations using the Greensock Animation Platform by adding a handful of extremely useful debugging tools, including:

    • Play, Pause, and Restart buttons
    • A visual playback scrubber
    • Buttons to dynamically change the playback speed (1x, 0.5x, 0.2x, etc)
    • A display of the current timeline time
    • For TimelineMax timelines, automatically-added buttons to jump to each label in the timeline
    • The ability to easily set custom loop in and out ranges for focusing on a specific span of the overall timeline, including making these in/out points persistent between page refreshes
    • Keyboard shortcuts for common actions

    Demo

    View the demo on CodePen

    Install

    You can install AnimPanel via npm:

    npm install anim-panel --save
    

    or simply include it in your HTML:

    <script src="anim_panel.js"></script>

    Use

    // Require the module if you're using something like browserify or webpack
    var AnimPanel = require('anim-panel')
     
    // Create your Greensock timeline using TimelineLite or TimelineMax
    // (using TimelineMax gets you extra goodies like label buttons)
    var tl = new TimelineMax({});
     
    // Add some stuff to your timeline (see the gsap docs if you don't know how to do this)
    tl.add();
     
    // Create the AnimPanel, passing it your Timeline instance
    new AnimPanel(tl);

    Keyboard Shortcuts

    AnimPanel includes keyboard-shorcuts for a variety of common actions.

    Action Keyboard Shortcut
    Toggle play/pause space
    Set speed to 1x 1
    Set speed to 0.5x 2
    Set speed to 0.25x 3
    Set range start b
    Set range end n
    Toggle range shift + space
    Clear ranges shift + x
    Jump forward 0.1 seconds alt + right arrow or page down
    Jump backward 0.1 seconds alt + left arrow or page up
    Jump forward 1 second shift + alt + right arrow or shift + page down
    Jump backward 1 second shift + alt + left arrow or shift + page down
    Jump forward 0.03 seconds control + alt + right arrow
    Jump backward 0.03 seconds control + alt + left arrow
    Jump to start of timeline/range return or enter
    Expand range by 0.1 seconds alt + up arrow
    Contract range by 0.1 seconds alt + down arrow
    Expand range by 1 second shift + alt + up arrow
    Contract range by 1 second shift + alt + down arrow

    Customizing Shortcuts

    If any of these shortcut defaults don't work for you, you can customize them when initializing AnimPanel:

    new AnimPanel(tl, {
      shortcuts: {
        togglePlay: 'tab',
        setRangeStart: 'i',
        setRangeEnd: 'o'
      }
    });
    

    Dev

    npm start: Automatically builds on file change and starts a live reload server with an example at http://localhost:3000/example/

    npm run build: Builds production-ready files

    Changelog

    See the release page.

    Install

    npm i anim-panel

    DownloadsWeekly Downloads

    28

    Version

    2.0.3

    License

    MIT

    Last publish

    Collaborators

    • onedesign