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

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?

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.

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.

Thank @eltonmesquita Edit: to fix it you need add z-index: 0 to the app container style; ex: * { z-index: 0 }

Problem: I can't using http://mojs.io/ in framework7 :disappointed: I dont know why? :confused: Pleace help me. :face_with_head_bandage:

Anybody using mo.js with framework7?

Hi

Is it possible to use an image inside a shape? I want to create a circle with that has an image.

Created the following example with html5 canvas, but then came across mojs and would like to give it a shot but I need to have the possibility to use an image inside a circle shape.

Thanks

In our gulp task setup, we take vendor JS files, concat & minify them.

Other packages might include 'use strict'; on the top level, causing strict mode to propagate downward into functions.

In build/mo.js:7219, we have this:

BezierEasing.prototype.generate = function(mX1, mY1, mX2,  mY2) {
  // ...
  float32ArraySupported = indexOf.call(global, 'Float32Array') >= 0;

Which raises an exception when in the web page:

Uncaught TypeError: Array.prototype.indexOf called on null or undefined
    at indexOf (<anonymous>)
    at t.generate (vendor-f37e19184d.js:24316)
    at Function.i (vendor-f37e19184d.js:24315)
    at vendor-f37e19184d.js:24315
    at Object.e.__esModule (vendor-f37e19184d.js:24315)
    at e (vendor-f37e19184d.js:24312)
    at Object.t.__esModule.default (vendor-f37e19184d.js:24312)
    at e (vendor-f37e19184d.js:24312)
    at Object.t.__esModule.default (vendor-f37e19184d.js:24313)
    at e (vendor-f37e19184d.js:24312)

Adding a null check before it fixes this bug:

  float32ArraySupported = global != null && indexOf.call(global, 'Float32Array') >= 0;

However, I'm not sure if falling to false would be the best option here, as I'm not sure what this line means in the longer run.

Thought this should be checked out. In my case I removed any/all strict definitions from the result.

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

I am struggling with an issue with Burst. On every desktop browser, and android phones, the burst is played normally. However, on ios something strange happens: The animation is ran twice, and the total duration is the duration I sat as a property on children. So, on android there is one burst with a duration of five seconds and on ios the is two bursts with a total duration of five seconds.

The code for the mojs.Burst

const mojs = require('mo-js');
        this.burst = new mojs.Burst({
            parent: '#label-' + this.props.id,
            radius: 40,
            degree: 300,
            angle: 120,
            count: 11,
            children: {
                shape: 'line',
                radius: 6,
                scale: 1,
                stroke: this.props.color,
                strokeDasharray: '100%',
                strokeDashoffset: { '-100%': '100%' },
                duration: 5000,
                easing: 'quad.out',
            }

The triggering:

this.burst.replay();

Hey guys... I'm just wondering if you have any plan to keep on this project? I don't see the documentation being updated and the last commit was almost a year ago.

So... What are the plans?

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.

It seems like independent deltas don't work in .then() functions.

I am trying to create a jump animation using this code:

const circle = new mojs.Shape({
  top: 40,
  left: 40,
  y: {
    0: 100,
    easing: "cubic.out"
  },
  x: {
    0: 20,
    easing: "linear.none"
  },
  radius: 40,
  duration: 250,
}).then({
  y: {
    100: 0,
    easing: "cubic.in"
  },
  x: {
    20: 40,
  }
});

When adding any of the independent delta properties specified in https://mojs.github.io/api/modules/html/#independent-deltas, the .then() is ignored altogether.

Am I using it improperly or is there any fix for this?

Currently the only way to use custom graphics is to customize a graphics class and inherit the mojs.CustomShape class, and then add it to mojs using the mojs.addShape() method. Then you can set and use custom graphics in the shape attribute.

One disadvantage of this method is that the added custom graphics class is global, and sometimes the added custom graphics will only be used in a certain module. My feeling is'this pollutes the global attributes'. For example, I want to use custom graphics menu and close in the Menu component. But in other components, I don't want to use the two custom graphics menu and close.

So one way I recommend is to support the use of the class type attribute value for the shape attribute. e.g. new mojs.Shape({ shape: MyCustomShapeClass })

Of course, my thinking is not complete, because I don't know much about the source code of mojs, and there is a better way that would be better. Hope Add support for modular use of custom graphics

Rect environment, this is a piece of my code. I cant make then to work. What am I doing wrong?

        progressAnimation.current = new mojs.Html({
            el: progressRef.current,
            width: {
                [progressRef.current.style.width || 0]: position * 100 + '%'
            },
            duration: 1000
        }).then({
            scale: {
                '1': '1.3'
            },
            opacity: {
                '1': '0'
            },
            duration: 1000
        }).play();

Allow the user to easily choose between seconds and milliseconds when working with mojs duration/shift properties. Instead of using duration: 1000 (ms by default), the user could be able to use duration: 1 (seconds).

This is the common usage in most animation frameworks.

When setting the burst count using the rand() function, the burst behaves wierdly, or random, too random. Sometimes the children are not spread out evenly, sometimes it's like the last childs is still playing. Compare this to when you set either count to, 2, 3, 4, 5 or 6 directly compared to 'rand(2, 6)'.

Example:

const example = new mojs.Burst({
  parent: '#example',
  x: 'rand(-50, 50)',
  y: 'rand(-50, 50)',
  count: 'rand(2, 6)'
});

document.addEventListener( 'click', function (e) {
  example.generate().replay();
});

Bug reproduction pen: https://codepen.io/sandstedt/pen/Vwjdroy

I want to play an animation and wait until it finishes. I checked the docs and tutorials and I did not find an API that returns a promise or something.

It seems there's no related discussion here so I would like it to ask if there's a standard way of doing this?

What I am doing now is wrapping it in a promise and it works fine:

const burstPromise = new Promise(resolve => {
    const burst = new mojs.Burst({
        radius: {30: 120},
        count: 10,
        children: {
            duration: 3000,
        },
        onComplete() {
            resolve();
        }
    });
    burst.play();
});

await burstPromise;