0

I'm trying to create a sequential animation using velocity.js that loops 3 times and stops.

In the example below I've queued nested functions to create a sequence one after the other. Then tried to loop that function 3 times using a 'for loop' but its only running once.

I should mention I've only just started learning javascript. I've opted with velocity.js for web animations as an alternative to using Flash for banners etc.

Erroneous code so far:

var i = 0;
var loopNo = 3;

function anim8() {
$( "#logo" )
  .velocity( { width: "260px", opacity: 1, left: "20px", top: "80px" }, { delay: 0, duration: 1000 } )
  .velocity("fadeOut", { delay: 1000, duration: 1000 })
  .queue(function() {
    $( ".copy" )
    .velocity({opacity: 1, translateX: "300px"},{duration: 1000})
    .velocity("fadeOut", { delay: 1000, duration: 1000})
    .queue(function() {
       $( "#img" )
      .velocity({opacity: 1, translateY: "300px"},{duration: 1000});
       $( ".outro" )
       .velocity({opacity: 1, translateX: "-190px"},{duration: 1000});
       $( ".button" )
       .velocity({opacity: 1, translateY: "-70px"},{duration: 1000});
    });
  });
}

$(document).ready(function(){
  for (i = 1; i < loopNo; i++) { anim8 (); }
});

I'm sure the answer is going to be obvious to someone but have spent a few hours without progressing. If you can explain the correct way to loop an animation of nested sequences that would be great!

Live demo: JS-BIN

eproptester
  • 1
  • 2
  • Define the anim8 function outside of the loop and invoke the anim8 function in the loop. – Wesley Egbertsen Dec 09 '15 at 10:58
  • i've defined my function and invoked it using`for (i = 1; i < loopNo; i++) { anim (); }` but its still not working – eproptester Dec 09 '15 at 14:06
  • I created a function loop and added a complete function to the last .velocity invocation. http://pastebin.com/eNXGvBXv It does indeed run the anim8 function again in the complete, but the animation from velocity won't run again. So maybe you should reset the #logo and stuff like how it was before all the animations? I don't have knowledge in velocity sorry. – Wesley Egbertsen Dec 09 '15 at 14:49
  • @eproptester: stuff like this is pretty easily done with **[GSAP](http://greensock.com/gsap)**. Take a look at **[this](http://jsfiddle.net/tahirahmed/zzsj0ykn/)** for example. – Tahir Ahmed Dec 09 '15 at 19:30

0 Answers0