mojs / mojs

The motion graphics toolbelt for the web

mo · js –

The motion graphics toolbelt for the web.

Intro

mo · js is a javascript motion graphics library that is a fast, retina ready, modular and open source. In comparison to other libraries, it has a different syntax and code animation structure approach. The declarative API provides you a complete control over the animation, making it customizable with ease.

The library provides built-in components to start animating from scratch like html, shape, swirl, burst and stagger, but also bring you tools to help craft your animation in a most natural way. Using mojs on your site will enhance the user experience, enrich your content visually and create delightful animations precisely.

Install

Use with a bundler

Mojs is published on the NPM registry, so you can install it through the command line interpreter using your favorite package manager. This is the best way to install the library if you are comfortable with javascript bundlers like webpack or rollup.

# npm
npm install @mojs/core

# yarn
yarn add @mojs/core

Then import it like any other module inside your build:

import mojs from '@mojs/core';

new mojs.Html({
  // ...
});

Using a bundler has many advantages like output compression, code splitting, tree shaking, etc., so we encourage you to use this kind of tool with mojs.

Use with a CDN

To rapidly include the minified production file in your web page, load the latest build from your favorite CDN using a generic script markup:

<!-- unpkg -->
<script src="https://unpkg.com/@mojs/core"></script>

<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/@mojs/core"></script>

Then instanciate using:

<script>
  new mojs.Html({
    // ...
  });
</script>

By default, if no one is specified, the CDN will automatically target the @latest version of mojs and load the UMD build from dist/mo.umd.js.

User guide

The base documentation you need to get started with mojs.

• Get started
• @mojs/player
• @mojs/curve-editor
• @mojs/timeline-editor

Learn

Discover the amazing things that mojs can do!

• Shape & Swirl (Tutorial)
• Burst (Tutorial)
• Icon animations powered by mo.js (Codrops tutorial)
• An Introduction to mo.js (CSS tricks tutorial)
• Playing with @mojs/player and @mojs/curve-editor (Vimeo video)
• Web animations and mo.js (Youtube video)

Developer

Get technical informations, open an issue/pull request or join the (amazing) community!

• API documentation
• Github
• Slack workspace (Not in the workspace yet? Use the invite link 🔓)

Showcase

• Motion Graphics for the Web
• Bubble Layout
• Sleepy Mole
• Animocons
• Love or Hate Modal
• Mograph
• Word Reveal
• Jump and Squash
• Physical Balls
• Dust Trail
• Bubble Modal
• Bubbles
• Blast (click to see)
• Simple Burst (click to see)
• Dusty Burst (click to see)
• Twitter Fav (click to see)
• Twitter Fav (stars) (click to see)
• Twitter Fav Firework (click to see)
• Simple Ripple (click to see)

Browser support

• Chrome 49+
• Firefox 70+
• Opera 36+
• Safari 8+
• Edge 79+

Many other browsers may work, but are not extensively tested.

Maintainers

Since 2019, mojs ecosystem is maintained and developed by:

• Xavier Foucrier
• Jonas Sandstedt

Contribute

If you want to report a bug or request a new feature/improvement, please read the project contributors guidelines before. Thanks for taking time to contribute.

mojs's Issues

on interaction gives "(intermediate value).run is not a function"

Hi,

Love the product, and the explanations you give in the docs are key. But there seems to be an issue with library where it is no longer runnable.

Anyone experiencing the same problem? As I suspect that this isn't a problem on my side, but a major problem regarding the library? If not, it'd be great if someone could explain to me what is acting up that makes the library not runnable on my side?

As a side note, it was working fine, without any change of code up until recently. Currently, nothing works.

Run animation inside an existing svg

There is any way to set a container where mojs should run the animation?

Animate one at a time without using then call

Hello, this is more of a 'help required' rather than an issue.

Suppose I have added multiple path objects under a single shape. I was wondering if there is any way that I could animate them one at a time without using separate then calls for each path because I have a big name to animate...

Delete mojs-shapes from DOM on timeline Complete?

Hi Oleg,

Im excited to play with this library. Thanks for your work on it, and for the recent push on documentation, curve editor + player. These are AWESOME tools that I'm sure will push adoption.

I'm exploring this lib to draw shape fx for a web app. I'm already using isShowEnd to hide shapes generated, though considering so many will be generated in the life of a session (hours, even days in an open tab), it would be great to auto delete DOM elements created when each timeline completes.

A couple of questions:

• Have I missed an option for this?
• If not, is there a clean way to get a reference to that DOM element created, inside the onPlaybackComplete callback so I can manually delete?

If I do something like:

onPlaybackComplete: function(){
        $(".mojs-shape").remove();
      }

I think I'm going to run into trouble, because animations overlap in time and I want each to complete before the deleting the shape[s] it makes.

• Even better, would you consider a deleteshapeOnComplete option or similar?

Much appreciated!
~s

quick demo of home page doesn't work

chrome and firefox

remove DOM when animation finish

Demo: http://jsbin.com/katevekawo
how to remove DOM when animate finish

onComplete can fire few times

onComplete callback can fire few times in this scenario when timeline have multiple tweens with different durations/delays and if timeline update them with their start time on the second repeat period.

Demo.

SVG Morph

Is there a possibility to add SVG Shape Morph at some point?
I've reading all the documentation, and shape is one of the very few things that is not a Delta (∆).

That would be pretty awesome.

Motion along a polyline

Does the motion path handle polylines?

Tutorials are not clickable

In the Tutorials sidebar of mojs.io I can only click Path Easing, all others are unclickable. This is true on Chrome for Mac and Linux as well as Edge on Windows.

Animate existing SVG symbols

Thanks for this wonderful library! It's so much fun to work with it.

Would it be possible to create a custom shape that uses a symbol already included in the document?
Let's say I am loading all my SVG in symbols that I want to reuse later, something like:

<svg xmlns="http://www.w3.org/2000/svg"> 
<symbol id="icon" viewBox="0 0 10 10">
<path d="M5 10c-2.8 0-5-2.2-5-5s2.2-5 5-5 5 2.2 5 5-2.2 5-5 5"/>
</symbol>
</svg>

which I am later using as

<svg class="icon" >
  <use xlink:href="#icon" x="0" y="0"></use>
</svg>

Would it be possible to use the use xlink:href="#icon" in the creation of the custom shape?

pathStart and pathEnd

What are the values of pathStart and pathEnd in relation to the motion path? a percentage? a segment? i see it has a clam range between 1 and 0

yoyo and delay

Hi!

I have an issue with a Tween that have a delay and yoyo = true. The repeat is called while the element is coming back with the yoyo.

My code:

var $square = document.querySelector('.square');

var t = new mojs.Tween({
  yoyo: true,
  repeat: 10,
  delay: 1000,
  duration: 800,
  onUpdate: function (progress) {
    $square.style.transform = 'translateX(' + progress * 100 + 'px)';
  }
});
t.run();

A demo is available here http://jsbin.com/fulebobodu/edit?html,css,js,output

Also with repeat: 10, I see 11 times my tween. It's a bit confusing.

Bower main

As you see in bower spec main field must contain non-minified versions of files. And you can do not use version field, caz it's updates with git tags.

Please fix the documentation website!

I click tutorials and all I get is easing path and nothing else is clickable on the side.

IM DYING TO PLAY WITH DISSS!!!

"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.80 Safari/537.36"

problem with position loading trough ajax

Hi,
first of all thanks for mo.js. It´s truly amazing :)

I was trying to implement mo.js on a button with the same code here http://tympanus.net/codrops/2016/02/23/icon-animations-powered-by-mo-js/

I´ve manage to do that, but found a problem, related with my interface, that I´m going to try to explain since I can´t create a fiddle.
My interface has 2 panels, pretty much like an email client. On the left you have a list of thing and when you press one, the panel in the right is loaded trough ajax, without reloading the page.

What I found out it that when I press a button in the interface loades through ajax, the animation is misplaced, when it should be around the icon. It is a lot of pixels up and left.
I´ve checked with firebug and indeed mojs is placing there a div like this:

<div class="" data-name="mojs-shape" style="position: absolute; width: 115px; height: 115px; margin-left: -57.5px; margin-top: -57.5px; opacity: 0.6; left: 50%; top: 50%; transform: translate(50%, 50%) rotate(0deg) scale(1, 1); transform-origin: 50% 50% 0px;">

What I think is happening is since the position is absolute, the margin, left and top are being calculated as if the right panel was a whole page, misplacing the animation, since I still have a left panel...

Is there a way to fix the position, maybe calculating the coordinates after the page is rendered ?

I hope my explanation was clear :)
Thanks

MotionPath Example [Demo]

Here is a demo using mojs.MotionPath to move an element along an SVG Path.

[Question] Where to find the demo's code?

It would be much appreciated,if you could say me, where i can find code of this demo : http://codepen.io/sol0mka/full/ogOYJj/ ?
in Codepen it looks unreadable.

Animate along a path

I have the following fiddle and I'm trying to figure out how to use MotionPath to animate something along a path

But I'm puzzled as to how to set the path property is it the path element or an array of some sort?

I keep getting this error

[Error] TypeError: undefined is not an object (evaluating 'this.path.getPointAtLength')
setProgress (mo.js:2056)
createTween (mo.js:2041)
VanillaRunOnDomReady (_display:100)
(anonymous function) (_display:109)

animation for multiple items

I need your help. To apply animation to multiple elements with a single class of "my-button"? Now this only works for a single button.
Replacement querySelector on querySelectorAll not solve the problem, the script becomes not working
Demo: http://codepen.io/ey_intuitive/pen/NxQdyY

Thank you!

Resetting a shape and removing 'then's?

So I have an animation run, a couple of shapes are created and 'then' added to them to create a multistep animation. On a click I then have the same shapes animate out, again using 'then' (I'm just adding a 'then' to them, then running play() instead of replay() so it goes from the last point.

At this point, I want to restart the animation, just doing the first half. However, when I restart it plays the whole thing including the animate out. I understand why it does this, because I'm gradually making a chained animation. So my current solution is to remake the shapes and start again. However this seems ridiculous as I'm left with shapes in the DOM and you're getting more and more shapes.

Is there a better way I can just run the first part of the animation again? Am I going about this wrong with my animate out?

Thanks in advance.

Problem with multiple button in a table

Hi,
I have a table with multiple buttons. Everytime I click on a button, there is an burst animation.

This is really strange, but If I click from in each button from top to bottom, all the buttons work.
If I click from the bottom to the top, some of the top button start to lose the ability to click. If you hover with the mouse you will understand.

I´ve built a codepen to prove this here: https://codepen.io/jcorreia/pen/xOZPbo
If you wish I can build a download demo.

I think it´s mo.js related because i you comment line 20 in the js panel:

    //play animation
   moAnimationSuccess($(clickedElement));

The buttons

behave normally.

Can you check this ?
Thanks :)

What are the differences between this and famous engine?

Just a little quickie here.

I'm currently using
http://famous.org/
as my primary UI framework.

What are the differences here between the two?

onComplete sometimes not running

onComplete is not being called half the time. I'm calling it from the last Tween in the timeline.

Is there a way to keep Burst showing after complete?

I'm changing only the radius and would like to keep burst from displaying none.

What makes this library different from the rest!

Hi, if you could explain or write some description to show the differences between mojs
and other libraries that would be very useful to visitors and other developer who will be interest to work on Mojs (you know what I mean, you have already created demos with other frameworks).

Trying to use with jquery

I'm using Ember.js which is built on jQuery. I have what are called components which are basically just templates that represent a small piece of UI that gets rendered in multiple places.
Each of these components that renders gets a unique ID and in the code backing the component I have access to the individual components element via jQuery. However I've found trying to pass that to mojs seems to get me this error

Uncaught TypeError: (this.o.parent || document.body).appendChild is not a function

I've tried to dereference to javascript using .get(0) but the problem is now that I get the animations only attaching to the first occurrence of my element I'm matching on.

My particular implementation of this library is using a small library created here

Which was using document.querySelector but I need to be a little more specific so I can attach these icon animations to each component so I can animate them individually.

Having a onPathCompleted method ?

Hi,

I test mo.js and I try to make a loop effect.
Waiting for documentation, I discover the methods directly in your objects. And I can see onComplete(), onStart(), onFirstUpdate() ...

But I did not find a method to listen the end of a loop when I use the repeat property. Because for my test (and I do not know if my approach is already good), I have many elements with the same Tween and I wanted called a function to initialise each at the end of the path and before the next animation.

If I'm not clear, you can still see my code here:
http://codepen.io/Jeremboo/pen/RWddjK

So, it would be interesting to have onPathCompleted() method ? Or go through a different logic maybe.

Is there a duration for each Shape properties ?

Hi !

I'm actually trying a basic Shape animation on this codepen and I would like to know if it's possible to have a duration for each property of a unique Shape. Like mojs.Html.

For example, I have a square which I would like to draw the outline first and making disappear after a delay while he turns :

|----------------------------------- Rotate --------------------------------|
|--- StrokeDashoffset ---| - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - -|-------- Opacity -------|

const square = new mojs.Shape({
  shape:       'rect',
  stroke:      '#FA6B6E',
  fill:        'none',
  radius:      20,
  strokeWidth: 8,
  angle:       { 0 : 90 },
  strokeDasharray: '100%',
  strokeDashoffset: { '-100%' : '0', duration: 500 },
  opacity:     { 1 : 0, delay: 1000, duration: 500 },
  // duration : 1500, // ???
});

But it doesn't work for me and, instead, I tried to use .then({})and I made something like this :

|----- Rotate * 0.25 ----||---- Rotate * 0.5 -----||----- Rotate * 0.25 ----|
|--- StrokeDashoffset ---| - - - - - - - - - - - - - - - - - - - - - - - - - 
- - - - - - - - - - - - - - - - - - - - - - - - - -|-------- Opacity -------|

const _rotate = dist => ({
  duration:    duration * dist,
  angle:       { 0 : [360 * dist], easing: 'linear.none' },
});
const square = new mojs.Shape({
  ..._rotate(0.25),
  shape:       'rect',
  stroke:      '#FA6B6E',
  fill:        'none',
  radius:      20,
  strokeWidth: 8,
  angle:       { 0 : 90 },
  strokeDasharray: '100%',
  strokeDashoffset: { '-100%' : '0' },
}).then({
  ..._rotate(0.5),
  strokeDasharray: false,
}).then({
  ..._rotate(0.25),
  strokeDasharray: false,
  opacity:     { 1 : 0 },
});

I did not find any examples of the searched approach and, if it is not possible to make a duration, how can I make something most clearly ?

Thank you for your work and for this library very promising :D

Unable to set random distance radius for burst in master build

In 0.174.4 I could set randomAngle + randomRadius to make the end burst non circular. Can't seem to find a way to do this in the master build.

Any way for translate SVG elemements - on IE ?

SVG inline elements, cam be tranlated ...
Works fine in: Chrome, Firefox and Safari ...

IE - not transform SVG elements.

Exemple:
http://codepen.io/Oguima/pen/XmvVqQ

mojs.io links not working on mobile.

Hi,
I'm not sure if this should be posted here but I'll give it a shot.

I have been trying several different links on the mojs.io website and none of them work from a mobile phone. I have been trying both with a Android (Chrome) and iPhone (Chrome & Safari). Single touch or long touch, none works for targeting the links or opening them.

When pressing the links in the top menu, it will simply close. When pressing a link in the side menu, the link will be highlighted (dot on the left side of the link) but nothing else will happen, it still stays open.

Currently, when I want to navigate around the website I have to go to github to find the links to the different sections or use Google to find the correct page.

Hope this can be fixed!

import export not supported in browsers

I tried to use tween.babel.js file, but it uses a bunch of imports that are not supported in browsers, except edge. And I get errors. Why is not everything tween related in a single file?

Cool project with a big thorn

I noticed we've both been following Pak on twitter (http://twitter.com/muratpak) therefore I believe you already know he's one of the lead motion designers worldwide. Your project is very cool but the similarity and use of the circle as the main icon is extremely bothering in this sense. Specially when it's considered that your project is also a motion design library for the web.
You should consider this issue.

http://i.imgur.com/TrOouDr.png

http://i.imgur.com/hBJN0le.png

http://i.imgur.com/eTcYu99.jpg

Motion blur!

Motion blur would be an awesome addition mo.js :)
Checkout this for reference: http://tympanus.net/Tutorials/MotionBlurEffect/index.html

Timeline reset

Hi,

is there a way to reset the timeline?

Loading library gives `Uncaught TypeError: Cannot read property 'appendChild' of null`

When loading mo.js I get this error:

Uncaught TypeError: Cannot read property 'appendChild' of null

on this line:

  Helpers.prototype.vars = function() {
    var ua;
    this.prefix = this.getPrefix();
    ...
    this.div = document.createElement('div');
    return document.body.appendChild(this.div);   <<<<<<< error here.
  };

What is the correct way to require/initalize this library?

I'm just trying to include it into a plain vanilla HTML page.

Bad legibility on 1x displays

The description text of the features looks really bad on 1x displays:

OS X 10.11.1
Safari 9.0.1

Changing tab (active window) while animation

I have a problem when user changing window tab to another page. So the animation will not be complete and few bug (like not all element beging drawn when user going back to the current tab)

And I fixed by this :

document.addEventListener('visibilitychange', function _func() {
    if (!document.hidden && !timeline._isCompleted) {
        timeline.replay();
    }
    if (timeline._isCompleted) {
        document.removeEventListener('visibilitychange', _func);
    }
}, false);

But I want to know, any trick or better solution can I do ? (or im missing something?)

Thanks

Handwritting animation ? (Masking)

I was wondering about , Can Mo.js do something like handwritting animation ? (Using masking bla bla)

Doc : https://medium.com/@gordonnl/stylised-line-animations-ded23320ffe5

Currently, Im using strokeDasharray and strokeDashoffset for a simple single line path (without masking / clipPath) and fadeIn the real one after.

But I want to do something better. 💃

Example : (In my case, im using <path>)

<path d="M63.3,36.3c0.5,0.7,0.8,1.4,0.7,2.2c-0.1,0.8-0.3,1.6-0.8,2.4c-0.5,0.8-1.1,1.6-1.8,2.5c-0.8,0.8-1.5,1.6-2.4,2.3c-0.8,0.7-1.7,1.4-2.5,1.9c-0.8,0.6-1.6,1-2.2,1.4c1.2,1.3,2.4,2.7,3.4,4.1c1.1,1.4,2.1,2.8,3.1,4.1c1,1.3,2.1,2.5,3.2,3.5s2.3,1.9,3.7,2.5c0.7,0.3,1.4,0.5,2,0.5c0.6,0,1.2,0,1.6-0.2c0.5-0.2,0.9-0.4,1.2-0.8s0.5-0.7,0.6-1c0-0.3,0.1-0.4,0.3-0.4c0.2,0,0.3,0.1,0.5,0.3c0.2,0.2,0.3,0.4,0.5,0.8c0.1,0.3,0.2,0.7,0.2,1.1c0,0.8-0.1,1.6-0.4,2.4c-0.3,0.8-0.8,1.4-1.4,1.9c-0.6,0.5-1.4,0.8-2.4,0.9c-1,0.1-2.1-0.2-3.4-0.7c-1.2-0.5-2.2-1.2-3.1-2c-0.9-0.8-1.8-1.7-2.5-2.7s-1.5-2.1-2.2-3.2c-0.7-1.2-1.3-2.3-2-3.5c-0.6-1.2-1.3-2.3-1.9-3.4c-0.7-1.1-1.4-2.2-2.1-3.1c-1.5,0.8-2.9,1.4-4.1,2c-1.2,0.5-2.4,0.9-3.4,1.1c-0.5,1.8-1,3.6-1.6,5.4c-0.6,1.8-1.1,3.4-1.8,5c-0.6,1.6-1.2,3-1.9,4.2s-1.3,2.3-2,3.1c-0.7,0.8-1.3,1.3-2,1.5c-0.7,0.2-1.4,0.1-2.1-0.5c-0.9-0.6-1.4-1.4-1.6-2.4c-0.2-1-0.2-2.1,0-3.3c0.2-1.2,0.5-2.5,0.9-3.9c0.4-1.4,0.8-2.8,1.1-4.3c0.3-1.5,0.5-3,0.6-4.5c0.1-1.5-0.1-3-0.6-4.5c-0.2-0.6-0.4-1.1-0.4-1.5c0-0.4,0.2-0.8,0.7-1.1c1.6-1.1,3.3-2.1,5-3.1c1.8-1,3.5-2,5.3-2.9c0.3-1.3,0.7-2.4,1.2-3.3c0.6-0.9,1.1-1.5,1.6-1.9c0.5-0.4,0.9-0.5,1.2-0.4c0.3,0.2,0.4,0.7,0.2,1.5c-0.1,0.3-0.2,0.7-0.3,1.1c-0.1,0.4-0.2,0.9-0.3,1.4c1.6-0.7,3.2-1.3,4.7-1.8c1.5-0.5,2.9-0.9,4.1-1.1c1.2-0.2,2.3-0.2,3.2-0.1C62.2,35.4,62.8,35.8,63.3,36.3z M40.1,49.9c-0.3-0.7-0.4-1.3-0.3-1.9c0.1-0.6,0.4-1.1,0.9-1.6s1-0.8,1.8-1.1c0.7-0.3,1.5-0.5,2.4-0.6c0.1-0.5,0.1-0.9,0.2-1.4c0-0.5,0.1-1,0.2-1.4c-1.7,0.9-3.4,1.8-4.9,2.7c-1.6,0.9-3,1.8-4.2,2.6c0.5,1.4,0.9,2.8,1,4.3c0.1,1.4,0.1,2.8,0,4.2c-0.1,1.4-0.3,2.7-0.6,3.9s-0.5,2.3-0.7,3.3s-0.3,1.8-0.4,2.5c0,0.7,0.1,1.1,0.4,1.4c0.8,0.6,1.5,0.6,2.3,0c0.7-0.6,1.4-1.5,2.1-2.8c0.7-1.3,1.3-2.9,1.9-4.8c0.6-1.9,1.1-3.9,1.5-6c-0.8-0.1-1.4-0.4-2-0.9C41.1,51.6,40.6,50.9,40.1,49.9z M44.1,50.6c0.1-0.7,0.3-1.5,0.4-2.2c0.1-0.7,0.2-1.4,0.3-2.2c-0.9,0.2-1.5,0.5-1.9,1.1c-0.4,0.6-0.3,1.3,0.2,2.3C43.3,50.1,43.6,50.4,44.1,50.6z M46.2,50.9c0.5-0.1,1.1-0.2,1.7-0.4c0.6-0.2,1.1-0.4,1.6-0.7c0.5-0.2,1-0.5,1.4-0.7c0.4-0.2,0.8-0.4,1.1-0.6c-0.6-0.6-1.4-1.1-2.2-1.5c-0.8-0.4-1.6-0.6-2.4-0.8L46.2,50.9z M48.8,40.3c-0.2,0.7-0.3,1.4-0.5,2.2c-0.2,0.8-0.4,1.6-0.6,2.4c0.9,0.2,1.8,0.5,2.7,1c0.9,0.5,1.8,1.1,2.7,1.8c0.4-0.2,0.8-0.5,1.4-0.9c0.5-0.4,1.1-0.8,1.6-1.2c0.6-0.4,1.1-0.9,1.6-1.4s0.9-1,1.2-1.5c0.3-0.5,0.4-1,0.4-1.5c0-0.5-0.2-1-0.7-1.5c-0.7-0.8-2-1.1-3.7-1C53,38.8,51,39.3,48.8,40.3z"></path>

Any easy example/demo to learn ?

Good job anyway 👍

Quick demo and IE(10,11 and Edge)

The quick demo just stops after 2 seconds with the following error (in the console):

SCRIPT5007: Unable to get property 'play' of undefined or null reference
mojs.io (1,4496)

The page doesn't render correctly in IE9 mode, but I don't trust the mode-switcher, so just assume it hasn't been tested in IE9. 10, 11 and Edge all stop after 2 seconds.

Play the animation backwards when the playback is complete.

How can i achieve this? I tried onPlaybackComplete () {} method and it isn't working.

Mojs and require console error

I'have tried to install mojs using bower install mojs and the console keep reporting 2 undefined functions: require and mojs. I tried to fix it installing via bower requirejs but the problem kept going on. Am I skipping any passage?

Tweens infinite repeat

Hi,

Is it possible to have a tween repeat indefinitely?

Regenerate and encrypt SauceLabs keys

In the .travis.yml file, your SauceLabs keys are open to the public. Regenerate and encrypt it so no-one else can use it - http://docs.travis-ci.com/user/environment-variables/

- SAUCE_USERNAME='legomushroom'
- SAUCE_ACCESS_KEY='6982f2ea-fd37-453f-9cc6-58ea67254b66'

Animating/Morphing custom path

Will Moj in the future have the ability to animate svg paths? Similar to <animate or Snap.svg.

Collision detection - future feature?

I have been thinking about how awesome collisions are and if there's any chance to implement a collision detection in the future.

I'm no expert, but I guess it could be done by having events emitting if multiple objects (that have some collision property/flag set to true) are sharing coordinates, thus colliding. If collision is detected, a function could be run which allows us to modify the object further.

For example:

let ball = new mojs.Shape({
    fill: 'cyan',
    y: {0:200},
    collision: {
        collide: () => {
            fill: {to: 'tomato'},
            y: {to: 0}
        }
    },
});

or maybe chaining, like with then()?

let ball = new mojs.Shape({
    fill: 'cyan',
    y: {0:200}
}).onCollision(){
    fill: {to: 'tomato'},
    y: {to: 0}
};

Perhaps also being able to supply an array with what objects it should be collidable with, so the ball can either collide with everything (that has the collision property set to true) or specific passed objects.

I don't know if you think this is suitable or how hard it would be to implement, but just an idea I had that I would love to see in the future as I think it would be amazing to have collision detection! :)

website display issues: ReferenceError: children is not defined

Something not right. Intermittent. Once working, always works. Cache/load order issues perhaps.

1. Navigate to site
2. Click on tutorials

Chrome Version 54.0.2837.0 dev (64-bit) OS X

Firefox 48.0.1

Use with Webpack

I am trying to setup mo.js in my webpack configuration.

installing it via npm install mo-js --save and then importing it via import mojs from 'mo-js' doesn't work.

Any tips how to set it up? Is the lib actually Es6 module compatible?

How to start from middle of timeline?

Hello! I'm trying to build a simple editor for this cool library and have made some progress (try this link if you're interested). At present I'm faced with a problem: how can I start the timeline from middle? I have looked into the code and found Timeline.prototype.start(time), but it seems not working at all :(