Hello, I am Wiego. Please start by reading the whole documentation! If you have any questions, find a bug or experience difficulties getting the plugin to work please use the Support Forum. Only leave a Review if you are happy with the plugin or are still unhappy with the plugin after reaching out to me in the Support Forum. Thank you!

Introduction

Slim Jim is a lightweight character animation utility for animating characters in SVG. Slim Jim works by interpolating the frames between your keyframes (much like Adobe flash does).

• Slim Jim characters are defined in an inline SVG (you could modify it in a program like Adobe Illustrator or Inkscape)
• Slim Jim characters are textured with CSS classes
• You define keyframes with different poses in arrays of javascript objects
• You define your animations in arrays with the names of the keyframes you want to use in the order you want to use them (you can also re-use keyframes)

Requirements

Slim Jim has zero dependencies and should work in all major modern browsers (Chrome, Firefox, Edge, Safari). Slim Jim does not have a GUI but does include some tools to help you with your animations (like a timeline, playback controls and jumping between keyframes).

Installation

To install from the Marketplace, click on the "Add to Project" button and then select the project you wish to add it to before updating the project in the backend of your website to pull in the plugin.

To install from the backend, go to Settings -> Updates & Plugins -> Install Plugins and then search for Briddle.Animate.

Setup

Simply upload a SVG. It will be automagically converted into an inline SVG for animation by the component. Add as many animations (scenes) as you want.

Add the keyframe definitions in the backend. It is recommended to use a dual monitor setup (one monitor for the Slim Jim backend and one for the frontend or preview).

You define the keyframes with different poses like this:

var keyframes = [
  {
    'stand': [
      {
        element: '#example .slimjim .left_leg',
        type: 'rotate',
        value: 60,
      },
      {
        element: '#example .slimjim .right_leg',
        type: 'rotate',
        value: -60,
      },
      {
        element: '#example .slimjim',
        type: 'move',
        x: 0,
        y: 200,
      },
    ],
    'jump': [
      {
        element: '#example .slimjim .left_leg',
        type: 'rotate',
        value: 0,
      },
      {
        element: '#example .slimjim .right_leg',
        type: 'rotate',
        value: 0,
      },
      {
        element: '#example .slimjim',
        type: 'move',
        x: 0,
        y: 100,
      },
    ],
  }
];

You define your animations (there can be multiple) like this:

var $ = new sj();
function play() {
  var tl1 = $.animate(keyframes,[
    {target: 'stand', duration: 1, effect: 'linear'},
    {target: 'jump', duration: 0.6, effect: 'easeout'},
  ], 24, true, true);

  var tl2 = $.animate(clouds,[
    {target: 'left', duration: 1, effect: 'linear'},
    {target: 'right', duration: 18, effect: 'linear'},
  ], 24, true, true);
}

... and play them by calling your own function:

play();

... or stop them by calling your own function:

stop();

Available animation types

When defining your keyframes it is important to make sure you include the same elements with the same types in the same order for each keyframe. This is because when Slim Jim interpolates the frames between your keyframes it simply loops through these elements to see what has changed. If you include an element in one keyframe and omit it in another or change the order of these elements, Slim Jim will get confused and start behaving strangely (he is just a simple kind of guy).

You can use the following animation types in your keyframes:

Debugging

You can debug your animation by calling the following function inside your own play() function:

$.timeline(tl1,'timeline',true);

This will add some controls to a DIV with ID 'timeline' (refresh, play, stop, jump to keyframes) and play the tl1 timeline.

Support

Please use the Support Forum (on the left side of the page for any theme or plugin) or send me a message. I also offer design and development services. You can visit my website for more information. Do not use reviews to ask for support.