180

Product support

Get help in the plugin support forum.

Categories

Note: This plugin is experimental and currently in beta status. "Beta" simply means that it is still in a development phase, it is only public for reasons of testing.

Features

This one was really fun to write and is even more fun to play with. I call this tool “Slim Jim” (after my own test character). Get creative and give incorporating SVG character animations into your design a try!

This is a lightweight character animation utility for animating characters in SVG. It works by interpolating the frames between your keyframes (much like Adobe flash does). Because your animation is SVG-based you can easily adapt the illustrations you create in software like Adobe Illustrator, Inkscape or Sketch and reuse most of your work for either print or animation.

  • Move SVG elements in an animation
  • Rotate SVG elements in an animation
  • Show/Hide SVG elements in an animation
  • Changing the opacity for SVG elements in an animation
  • Easing effects (linear, easein, easeout, easeinout, elastic)
  • Morph SVG ellements (ellipse, polygon, path)
  • Scale SVG ellements
  • Paint SVG ellements in another color (fill)
  • Adjust the framerate for an animation
  • Adjust the speed of an animation between 2 keyframes
  • Loop an animation
  • Uses requestAnimationFrame for better performance on smartphones
  • Only animate keyframes (for debugging)
  • Play and stop animation (for debugging)
  • Jump to specific keyframe (for debugging)
  • See a timeline (for debugging)

Like this plugin?

Did you know that only about 30% of my plugins are paid (70% of my plugins are free) and that 30% of your purchase goes to help fund the October Project? If you purchase this plugin, you can help me to develop it further, provide support for it or make new plugins.

My other plugins include:

Component

Hello, I am Wiego Bergsma. 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! Wiego

Character Animation in SVG

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

You need an account on octobercms.com to install this plugin.

  1. Sign in and click on the Add to Project button on the product page for the plugin in the marketplace.
  2. Select the project you wish to add the plugin to (or create one).
  3. Make sure you install any 3rd-party plugins this plugin depends on
  4. Make sure you have attached this project to your website in the backend of your website in order to pull in the new plugin (Settings > Updates & Plugins). Don't worry, attaching or detaching your website to a project will never delete anything!
  5. Make sure you allow short_open_tag (this is allowed in PHP by default)

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.

backend

backend

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).

backend

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:

Type Parameter
move x, y
scale x, y
morph x, (y can be empty for polygons and paths)
rotate value
opacity value
show -
hide -
paint x, (y can be empty)

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.

1.1.3

Added some code snippets and an extra button to return to the update page from the preview

Oct 10, 2019

1.1.2

Cleanup

Oct 09, 2019

1.1.1

Made debug timeline optional in component

Oct 09, 2019

1.1.0

Made loading of javascript library optional in component

Oct 09, 2019

1.0.9

Bugfix in javascript asset path

Oct 09, 2019

1.0.8

Added welcome screen

Oct 09, 2019

1.0.7

Added preview

Oct 09, 2019

1.0.6

Added documentation

Oct 09, 2019

1.0.5

Added animation component

Oct 09, 2019

1.0.4

Added Sidebar to Scene forms

Oct 09, 2019

1.0.3

Updated table briddle_animate_scenes

Oct 09, 2019

1.0.2

Created table briddle_animate_scenes

Oct 09, 2019

1.0.1

First version

Oct 09, 2019