visionmedia/move.js

CSS3 backed JavaScript animation framework

move.js's Issues

relying on requestanimframe and not settimeout ?

not sure this is "bug", more a suggestion.

setTimeout isnt "animation friendly" see http://paulirish.com/2011/requestanimationframe-for-smart-animating/

the code in .end() which does setTimeout

https://github.com/visionmedia/move.js/blob/master/move.js#L584

404 assets in the iMac*.html examples

These:

• Mac-titlesrc: http://images.apple.com/imac/images/overview_allinone_title20110426.png
• Mac-subtitle: http://images.apple.com/imac/images/overview_allinone_subhead20110426.png
• Mac: http://images.apple.com/imac/images/overview_allinone20110426.png

doesnt apply on recently updated elements in angular js

I have used move.js along with angular.js and trying to add some animations to newly added elements.
when the elements are static it works fine.

Problem :
Now,when i try to add the same to newly scope elements it doesn't apply.I guess there would be some issue with the sequence of execution.
As the move.js functions functions runs before my angular js updates the scope method.

so far, i tried 👍

1. Included it before body closing tag.
2. tried to get the regular jquery last element get function to identify the last element in the list(ie my newly added element) but it takes last but one element and applies my animations to that code.

Please let me know if i have any alternative or used any wrong approach.

Thank you in advance.

callbacks are triggering when animation begins

Shouldn't they be called after the animation complete, calculated by total duration and any delays?

Strange issue when then()-chaining nested elements

Hi,

I have discovered an issue where then()-chaining does not appear to work correctly. I am trying to chain four animations of two elements (el1 and el2), like so: A(el1) -> B(el2) -> C(el2) -> D(el1). The issue seems to appear ONLY when el2 is a descendant of el1 in the DOM (or perhaps vice versa?). When el1 and el2 are siblings in the DOM tree, it works fine.

When the issue does appear, it seems to take the form of a zero-length animation, and/or the then() callback not occurring.

I tried to create a minimal example. I was able to demonstrate the issue in the master branch, but NOT in the gh-pages branch.

To see it, load up this url:
https://rawgit.com/abliss/move.js/9e0f17e8a2711cc35ce3117f8f32aa76c9d791cb/examples/docs.html
and scroll down to the last example, number 13.

When the checkbox is clear, el2 is a sibling of el1, and the chain of four animations works as intended.

When the checkbox is checked, el2 is a child of el1, and the fourth animation gets skipped (i.e. has duration 0).

I suspect the issue has something to do with the transition-end callback, reset(), and inheritance -- but I'm having a hard time nailing it down exactly.

Again, using the version of build.js that's deployed in the gh-pages branch, this issue does NOT seem to appear.

Please let me know if you have any insight, or if I'm trying to do something that's not supported.

Thanks!

use scale3d when possible.

since translate3d() is supported.

how can i use the move.js to run a animation infinitely?

I want a box to slide infinitely and i prefer doing it with move function directly, because the effect with css3 keyframe is crappy.
But i didn't figure out a way to make move function run infinitely, is it possible?

Here is my code with move.js (the effect looks good):

function play(){
          var moveBack = move('.box')
              .x(0)
              .duration(10000);

              move('.box')
              .x(1000)
              .duration(10000)
              .then(moveBack)
              .end();

        }

And here is my code using CSS3 Keyframes (the effect looks crappy, but it runs inifinitely):

function play(){
          move('.box').animate('slide', {
            duration: '100s',
            'iteration-count': 'infinite'
          }).end();
        }

@-webkit-keyframes slide {  
        0% {  
          left: 0;
        }  

        50% {  
          left: 500px;
        } 
        100% {  
          left: 0;
        } 
      }

Correct way to chain then() and end() ?

I'm having problems with this code; I would expect that end would only be fired once the animation was complete:

    move(transition)
        .translateX(from)
        .duration(10)
        .then()
            .translateX(to)
            .duration(700)
            .ease('ease-out-quart')
            .then()
                .delay(1000)
                .translateY(window.innerHeight)
                .duration(350)
                .ease('ease-in-quart')
                .pop()
            .pop()
        .end(console.log.bind(console, 'test'));

Full code is here: http://jsbin.com/judoguvape/1/

Is there something special that I need to do in order so that the console.log is fired only at the end?

uncaught exception: [Exception... "Not enough arguments" nsresult: "0x80570001

Hi Tj.

getting this error in Firefox 4.0.1 (pc) when I try the demos on the docs page when I Press play on the first demo works fine in chrome

http://visionmedia.github.com/move.js/

uncaught exception: [Exception... "Not enough arguments" nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS frame :: http://visionmedia.github.com/move.js/move.min.js :: <TOP_LEVEL> :: line 5" data: no]

Does not run in IE10?

I'm experimenting with move.js, but on IE10, animations aren't visible at all. Check for example your demo page.

I don't know why move.js shouldn't run on IE10. Modernizr detects csstransforms and csstransitions.

Do you have more information?

No animation with div elements created via Javascript.

When I create a div element with HTML and use move functions on it, it works just fine. However, when I use Javascript to create and element ( = document.createElement('div')), and set the class and Id, it won't animate with the move functions. It just jumps to the end position, even if I have the duration set.

move in not defined

Hi,

I am having difficulties to set up move.js

Here is my code:

<script src="<?php echo base_url('assets/js/lib/jquery-1.11.1.min.js'); ?>"></script>
<script src="<?php echo base_url('assets/js/lib/move.min.js'); ?>"></script>

and

$('.some_selector').on('click', function() {
  move('.some_selector')
    .duration(1000)
    .set('opacity', 1)
    .add('left', 500)
    .end();
});

I am getting following errors:

move.min.js:1 Uncaught TypeError: Cannot read property 'style' of null
main.js:60 Uncaught ReferenceError: move is not defined

Can you please provide some assistance?

add support for bower

It would be nice to find this lib on bower ... and not the forked version of it :)

Remove animation properties after animation is completed

Hi!

Thank you for a great library.

I was wondering, if I first animate a box like this:

move('#square').to(300, 200).end();

And then I want to position the box without an animation, like in this pure JS example:

document.getElementById('square').style.transform = "translate(200px, 200px)";

It will animate with move.js's settings, because

transition-duration: 500ms;

is not removed from element styles when the animation is completed. By design?

I think those styles should be removed when end() is triggered.

Carl

Add support for percentage values

I have made a commit here: https://github.com/alkavan/move.js/commit/cd9a80a02c38c567fe7a36ab7710c0730db29fb2

This is an example of modified translateX() and translateY() methods to support passing percent values, for example translateX('60%') or translateX('-60%') would work now.

I think this is something that should be done to all types that support percent values, I can do this because I really need this functionality, but I wonder if you'll pull this changes if I'll add this to all methods, because while I don't really need this for all of methods, someone else might ...

UPDATE: also added to translate() method: https://github.com/alkavan/move.js/commit/d108addf231eaec15dcc075823246f2b20ffbc4d

Change site URL to http://tj.github.io/move.js

document.body.style called before body exists

Uncaught TypeError: Cannot read property 'style' of null

... Move is initialized before body exists. There are workarounds... non of which should be necessary.

Line 284
var styl = document.body.style;

Question: How can I interrupt / stop animation?

Is there a way to stop animation, something like this;
//init animation
move('.clock').
.to(500, 200)
.rotate(360)
.duration('10s');

// elsewhere
move('.clock').stop(); //this will stop rotation
move('.clock').continue();

animate div which have animation in it.

I have a div with a repeated short animation in it. When i try to move this div with a x(), the div goes directly to the x value.

Use -webkit-transform: translate3d()

For .to(), .x() and .y(), it's better to use translate3d() as this is hardware-accelerated on iOS. However, I think only Webkit supports this.

http://www.mobigeni.com/2010/09/22/how-to-use-hardware-accelerated-css3-3d-transitions-on-ipad-and-iphone/

Move multiple elements

First off - thank you for this - an awesome library.

I've found a single inconvenience and right now I can't think of a good solution on my own, so I'm here for help rather than an actual issue of move.js

offset = App.win.height * -1
move('#stage').y( offset ).end()
move('#header').y( offset ).end()

I would rather do

move('#stage, #header').y(App.win.height*-1).end()

I've already added a custom selector engine ( jQuery ), but .get(0) gets only a single element. Is there a way around this ? Maybe it's on the roadmap to support multiple elements ?

IE9 support, experiences with move on IE9

Some issues that I've experience using move on IE9:

• Effects only takes place when I move the mouse in the webpage (as in, I use given example codes in the IE console, nothing happens, I move the mouse over the webpage, it triggers)

• Effects does not work seamlessly. In one example I use this code:

  move('#my_savings .circleInnerContainer')
  .translate(280, 0)
  .rotate(360)
  .end();

And with that code, I see that the element has been moved, and has been rotated, but just from one state to another, no transitions at all as expected from the demo site

• The demo page does not work in IE9, I get some undefined errors ("getComputedStyle is undefined" and "The value for addEventListener is null or undefined)

Opacity broken in 0.3.1

Hi

Opacity seems to be broken in 0.3.0 and 0.3.1.

apply multiple properties inside set method?

Set is currently only able to accept a single key / value. Is is feasible to also be able to accept an object and iterate the keys (similar to jquery's extend)?

Animations under chrome (on mac) do not work on properties not defined ahead of time

I am running the latest version of chrome for mac (37.0.2062.124). When you animate properties that have not already been set on the node, no animation occurs, and it jumps to where it belongs. Here's a JSFiddle that demonstrates the problem:

http://jsfiddle.net/hillboy/u2j8291t/1/

Obviously, this is easy to work around, set the start-values you want either in the CSS file or programmatically (as I have done). However, I didn't see any documentation about this, so I figured I'd make a note of it here.

This problem does not exist under Safari.

Add support for npm (package.json)

Am I wrong, or there is no way not to install it via npm?

Bashing a button with "add" or "sub" doesn't work as intended

Bashing a button to move an element takes the value as the element is clicked during the animation to add it to the value. A callback should be awaited

[Enhancement] Reverse engineer position after translating

Great tool, keep it up!

I got an idea for a neat feature: I need to know the new position of the element after translating. It would be awesome if anyone could think of something!

Cheers.

Example 1 in examples/docs.html is not working

The public documentation at visionmedia.github.io/move.js/ uses version 0.3.2 (open console & type move.version) and there Example 1 works as expected. However if you clone 0.4.0 and open examples/docs.html all the other examples work as expected but Example 1 does not do anything.

I did not yet found any reason why this happens. Others experiencing the same issue?

move easing functions to a different component.

click event fired only once

when using move.js for animation, I had a button in html with absolute position and attach a click handler, the event will fired just when page load.

Several examples are not working

Failed to load the images from http://images.apple.com/
These examples include:
move.js-master/examples/jquery.html move.js-master/examples/imac.html ect.
You can check it in the download zip file named move.js-master.

Fix / test vendor support

chucked some logic in there but I haven't tested other browsers yet

Remove transition-duration style after move?

After completing a move animation, the [-vendor]-transition-duration style is still on the element, which will alter other interactions outside of move.js. Current workaround is to remove it by passing callback to final end().

Perhaps the top-level end() should remove this style as part of move.js?

How to loop an animation

I want loop play a animation, how to do it? thanks

use a component for css properties.

function animationEndListener passed in end(animationEndListener) is called instantly

whenever I pass a function x in .end(x) its called instantly, can somebody test for example this code:

move(myDiv).duration(10000).ease('in-out').to(Math.random() * 400-200,Math.random() * 400-200).set('opacity', 0.2).scale(0.5).then(function(){
alert("Animation then");
}).end(function(){
alert("Animation done");
});

Move multiple dom elements?

Hey guys,

Great project.

Now I feel like I'm missing something obvious here - and apologies if I am - but move.js doesn't seem to support selecting multiple dom elements to apply an animation to? (i.e. supplying a '.someClass' selector, I'd assume would move all matches for that class, but it just moves the first match).

And the jquery example where we override the .select function, also returns a single JS Dom element.

At the moment I've got a function that loops through each instance of a matching dom element and applies the desired animation; but it feels a bit wrong.

D.

No doctype on examples

The examples page has no doctype
IE therefore displays the page in quirks mode

deprecate Move.version

Animations not working in default Android browser

Hi

The example demo page doesn't work in the default android browser although it has full support for CSS3 animations. It works in other mobile browsers such as Chrome/FireFox.

no way for bower package?

Not sure if this is possible to migrate from component. Any ideas about that?

Inner `require` conflicts with browserify

When bundling my code with move.js included, browserify tries parse inner require method. Any way how can I avoid it? Renaming locally inner require to _require does help.

Thanks.

New Release 0.2.1 and 0.2.0 Not working in FireFox

Hi,

New Release 0.2.1 and 0.2.0 are Not working in FireFox version - 24.0. previous release 0.1.1 is working.

best regards,
jw

Cannot read property 'style' of null

I added move.min.js in an html page but I'm getting this error in Chrome's console:
Uncaught TypeError: Cannot read property 'style' of null

remotes property in component.json produces error

The following line in component.json produces error when I run $ component install (component 1.1.0, OS X 10.9.5):

"remotes": ["https://raw.githubusercontent.com"],

The error message:
fatal : no remote found for dependency "component/has-translate3d".

This is because move is a public component and component.json specification clearly states that the public component must not contain any remotes. The specification has probably updated since move's component.json was created.

Removing the line removes the error and the component can be installed.

I have included the fix into the pull request #70.

use after-transition

yields/after-transition.

invokes the callback immediately if the browser does not support transitions, or after the transition.

Add offset/origin

Need 'Transform Origin' be added to scale & rotate...

iOS 6 & 7 issue...

Hi,

Great library! However, I'm noticing a difference on iPad 3 between iOS 6.0.1 & 7.1.1.

The duration seems to get lost on iOS 6 thereby losing the animated effect.

I.e., move('#domObj').x(-500).ease('in-out').end();

In iOS 6 it jumps to -500px and does not animate.

Slow movement not smooth

Using move.set( 'left'... and move.set( 'top'..., I'm attempting to move my animations slowly across the screen, sometimes 2% towards the left, 3% towards the top in 4 seconds. When I do this the movement isn't completely smooth - it makes progress in small jerks that are noticeable at this speed.

Environment:
Mackbook Pro OSX Mavericks, Chrome 37.0.2062.122