Giter Club home page Giter Club logo

mojs's Introduction

mo · js – npm ci Coverage Status Slack

The motion graphics toolbelt for the web.

mo · js

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.

Learn

Discover the amazing things that mojs can do!

Developer

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

Showcase

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:

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 People

Contributors

and avatar baptistebriel avatar bento-n-box avatar bryanbraun avatar danielruf avatar drwpow avatar fandy avatar gitter-badger avatar indolering avatar kostasx avatar legomushroom avatar lukasdrgon avatar mitchheddles avatar oxyflour avatar realdreamer avatar roperzh avatar ryanirilli avatar sandstedt avatar sudocat avatar xavierfoucrier avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

mojs's Issues

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

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.

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.

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.

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 👍

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)

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.
screenshot from 2015-11-23 08 38 13

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

giphy

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?

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

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

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.

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

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.

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

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?

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.

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.

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"

screen shot 2015-12-11 at 7 59 16 am

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

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.

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

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!

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 :(

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.

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

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! :)

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?

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?

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.