visionmedia / move.js

CSS3 backed JavaScript animation framework
http://visionmedia.github.com/move.js/
4.72k stars 686 forks source link

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

Closed cyberglot closed 11 years ago

cyberglot commented 11 years ago

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;
        } 
      }
ghost commented 11 years ago

This setup will loop indefinitely with the javascript only. It uses a combination of setInterval and setTimeout and the coords are manually plotted for motion.

Here's a mock up i put together for a project. Issue is there's little to no IE support for CSS3. http://dl.dropbox.com/u/20400549/fiddle/map/no_explorer.html

In lieu of that issue i put together an alt version using jquery.path.js which works across the board but is a wee bit heavy on the processor (at least this concept is). https://github.com/weepy/jquery.path http://dl.dropbox.com/u/20400549/fiddle/map/all_browser.html

addEventListener('DOMContentLoaded', 
  setInterval(function(){
    var moveBack = move('.element_to_move') // move back to start position
        .x(0)
        .duration(2000)
        .end();

    move('.element_to_move') // start position
        .ease('snap')
        .to(0, 0) // X,Y Coordinates
        .duration(1000)
        .end();

    setTimeout(function(){ // second position
        move('.element_to_move')
            .to(0, 0) // X,Y Coordinates
            .duration(1000)
            .then(moveBack)
            .end();
    }, 2000);
  }, 6000), 
false);
yields commented 11 years ago

closing, if this is still an issue feel free to open :)

cyberglot commented 11 years ago

yes. it totally could be closed. i really forgot about this issue, sorry.