how to dequeue elements from a custom queue using shim

[fattenap]

I'm currently using the shim and I'm not too sure if I'm dequeue a queue correctly.

I have an array of elements in which I loop through calling Velocity(element, propertiesMap, options) on each one. options has a queue property with a value of "itemQueue". I then dequeue the elements by calling Velocity(elementsArray, propertiesMap, { queue: false }) which runs the animation as expected except that subsequent runs are getting longer and longer to start the animation.

I'm thinking that the queue is not being dequeued properly, but I can't figure out how to do it with the shim syntax.

Thanks

[julianshapiro]

There actually is no syntax for doing that because that's a jQuery function. I guess I'll have to make it available via Velocity.dequeue() or something. I'll flag this and come back to it tomorrow. Thanks!

[fattenap]

Hi,

I've been trying a few different things and no longer create a custom queue. I simply push the elements into an array and then animate them. But I'm still experiencing a progressive delay with the animation start time on subsequent calls. It seems to be happening when using the stagger option.

Anyway, I just thought I'd give a quick update as it might shed some light on what's going on.

thanks

[julianshapiro]

Does this work: Velocity.Utilities.dequeue("queueName"); ?

[fattenap]

No, not really.

This is the code and maybe you can see what I'm doing wrong or a better way of doing it.

During initialization the UI sends an element, which usually represents a list of items. Every time I receive an element I push it onto my queue called elementQueue to be animated later. Below is the code snippet

if(isTransitioning){
  //push onto my queue
  elementQueue.push(element);
//store the props and options for the animation later on
  itemsInPropMap = propertiesMap;
  ItemsInOpts = options;
// add a custom queue prop and pass it to Velocity
  options = options || {};
  options.queue = "testQ";
  return Velocity(element, propertiesMap, options);
}

Then after the UI has initialized I call my dequeueElements function

var dequeueElements = function(){
//clone elementsQueue and then clear it
    animationQueue = elementQueue.slice(0);
    elementQueue = [];
//dequeue elements
// This does dequeue as far as I can see but it doesn't animate the elements
    animationQueue.forEach(function(ele){
        Velocity.Utilities.dequeue(ele, "testQ");
    });
};

I loop through the elements to dequeue them, which seems to dequeue them properly. They appear but they do not get animated.
I've tried different approaches with, like passing options.queue = "false", varying results.

Sorry I'm going to add another variation, which I thought would work, but the items aren't visible, but they are there.

if(isTransitioning){
  hasElements = true;
  elementQueue.push(element);
  options = options || {};
  options.queue = "testQ";
  itemsInPropMap = propertiesMap;
  ItemsInOpts = options;  
  // Spoof then()
  return then();//
}

then calling

var dequeueElements = function(stop){
  animationQueue = elementQueue.slice(0);
  elementQueue = [];
  ItemsInOpts.queue = "false";
  Velocity(animationQueue, itemsInPropMap, ItemsInOpts).then(function(elements){
      elements.forEach(function(ele){
        Velocity.Utilities.dequeue(ele, "testQ");
      });
      isTransitioning = false;
      animationQueue = [];
      hasElements = false;
      itemsInPropMap = void(0);
      ItemsInOpts = void(0);
      return elements;
  });
};

Oh and itemsInPropMap === "transition.slideRightIn" and ItemsInOpts = { stagger: 175, drag: true }

[julianshapiro]

This is how you're supposed to work with custom queues. You shouldn't need to be creating your own queueing mechanism:

http://codepen.io/julianshapiro/pen/bIBGa

[julianshapiro]

If that doesn't help you, let me know and I'll take another look at this thread. Closing this for now, but keep me updated and I'll continue responding.

[julianshapiro]

Also, to confirm, I just tested my CodePen demo with the shim and it worked fine.

[fattenap]

OK. I figured out whats been happening.

I want to say up front that I stopped using the custom queues, which seem to work by the way, because it wasn't what I needed. But thanks for the CodePen, it helped me understand what custom queues are for and how to use them properly.

Thanks :)