how to dequeue elements from a custom queue using shim

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

[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 }

[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 😃