CODEWITHSUNDEEP
javascriptjqueryanimation
user3078676
user3078676

Reputation:

How to start new velocity.js effect only when the first ends?

I have an ajax app with velocity.js and animations (one global animation for a content wrapper to animate content off the screen, and animations inside the content that's being loaded).

With every page call my script first animates the content wrapper off the screen with something like this:

$('#main').velocity("transition.slideRightBigOut", { duration: 500 });

And then a new script FROM the content I load animates the content itself to screen:

$('#main').velocity("transition.slideRightBigIn", { duration: 500 });

But the whole experience feels a bit weird. The animations feel like "stagger", especially when the content I load is rather big.

What I tried to do is just to put the slideRightBigIn transition as a function inside the slideRightBigOut transition like that:

$('#main').velocity("transition.slideRightBigOut", { duration: 500 }, function() {
    $('#main').velocity("transition.slideRightBigIn", { duration: 500 });
});

Of course in this case I control my animation from the content I load. But this doesn't work the way I want just because the content may load for 5 seconds and thus I will see the whole animation process only when the content loads.

Thanks for your help.

SOLUTION:

Final solution of my case is wrapping the functions that build the ajax-loaded content in success call in setTimeout function with timeout equal to length of the slideRightBigOut animation which is called on beforeSend call.

The "loading" animation slideRightBigIn is with no changes called from the loaded content.

Thanks to the Clement for a tip.

Upvotes: 1

Views: 1999

Answers (3)

kinny94
kinny94

Reputation: 374

You can also achieve this by using Velocity Promises as given in Here.

/* Using Velocity's utility function... */
$.Velocity.animate(element, { opacity: 0.5 })
    /* Callback to fire once the animation is complete. */
    .then(function(elements) { console.log("Resolved."); })
    /* Callback to fire if an error occurs. */
    .catch(function(error) { console.log("Rejected."); });

Upvotes: 0

Adel
Adel

Reputation: 6258

You can use RunSequence(), see this example

/* jquery.js */
/* velocity.js */
/* velocity.ui.js */

var $element1 = $("div").eq(0),
    $element2 = $("div").eq(1),
    $element3 = $("div").eq(2);

var mySequence = [
    { e: $element1, p: { translateX: "+=100" } },
    { e: $element2, p: { translateX: "+=100" }, options: { sequenceQueue: false } },
    { e: $element3, p: { translateY: "+=100" } }
  ];

$.Velocity.RunSequence(mySequence);

Upvotes: 0

Clément Andraud
Clément Andraud

Reputation: 9269

You have option with velocity.js like queue (or completed...) :

Option: Queue

You can set queue to false to force a new animation call to immediately run in parallel with any currenty-active animations.

/* Trigger the first animation (width). / $element.velocity({ width: "50px" }, { duration: 3000 }); // Runs for 3s setTimeout(function() { / Will run in parallel starting at the 1500ms mark. */ $element.function call">velocity({ height: "50px" }, { queue: false }); }, 1500 // 1500ms mark);

Alternatively, a custom queue — a queue that doesn't immediately start — can be created by passing queue the name of your custom queue. You can build multiple custom queues in parallel, then later start them individually via $element.dequeue("queueName") (or Velocity.Utilities.dequeue(element(s), "queueName") if you're using Velocity without jQuery).

Note that the loop option and reverse command do not work with custom and parallel queues.

Velocity uses the same queueing logic as jQuery, and thus interoperates seamlessly with $.animate(), $.fade(), and $.delay(). To learn more about Velocity's queueing behavior, read this primer.

http://julian.com/research/velocity/#queue

Upvotes: 2

Related Questions