Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

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

Closed
jugoncalves opened this Issue · 3 comments

2 participants

@jugoncalves

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

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

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

@yields yields closed this
@jugoncalves

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.