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.
Features
- 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)
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.
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:
- CRM Pro (Customer Relation Management)
- Room Booking Pro (Room Booking engine)
- Members Pro (Member subscriptions)
- Invoice Pro (Invoicing)
- Webmail Lite (Webmail)
This plugin is also included into the following bundle
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:
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.
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.
-
This plugin has not been reviewed yet.
-
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 |