Using function-based values with delay

[Dipscom]

Oh mighty Powers That Be!

 

Descend upon this mortal and enlighten my soul!

 

I pray, can one beg to be allowed to use mighty function-based values with the delay parameter?

 

See the Pen ybERWg?editors=1111 by dipscom (@dipscom) on CodePen

[OSUblake]

Use the mighty for-loop. It's faster and less code.

 

var divs = document.querySelectorAll("div");

for (var i = 0; i < divs.length; i++) {
  TweenMax.to(divs[i], 1, {
   xPercent: Math.random() * 200,
   ease: Power1.easeInOut,
   delay: i * 2,
   repeat: -1,
   yoyo: true
  });
}

 

[Dipscom]

I am using that, yes. Just praying for some godly action here.

 

But, now I have to transform a HTMLCollection into a real array in order to manipulate it to my hearts content.

 

At least it warms my belly to know I have taken the path mighty demigod @OSUblake has shown. Take pity on this ant oh mighties!

[OSUblake]

Node list to array.

function selectAll(selector, context) {
  var nodeList = (context || document).querySelectorAll(selector);
  return Array.prototype.slice.call(nodeList);
}

 

More code, but faster.

function selectAll(selector, context) {
  var nodeList = (context || document).querySelectorAll(selector);
  var i = nodeList.length;
  var elements = new Array(i);
  while (i--) { elements[i] = nodeList[i]; }
  return elements;
}

 

See the Pen fc57f254bb9a98ab9752fdde6a3a19d6?editors=0010 by osublake (@osublake) on CodePen

 

 

[Carl]

Great question, Pedro. 

 

The he issue here is that even though you can have a tween that has multiple targets that have have multiple properties being animated to unique values it is all being controlled by ONE tween that you can play, pause, etc. 

 

delay changes the start time of a tween and you can't have a single tween with multiple start times. Make sense?

 

Again, best to heed the wisdom of mighty Blake. 

[PointC]

I'm having a weird day. I read Blake's reply and started singing to the tune of Devo's Whip It.

 

"When your divs need to tween, you must loop it. I say loop it. Loop it good."

[GreenSock]

You could just switch to a staggerTo() so that you can use the cycle feature to do that:

 

TweenMax.staggerTo("div", 1, {
        xPercent:function() {
            return Math.random() * 200
        },
        repeat: -1,
        yoyo: true,
        ease: Power1.easeInOut,
        cycle:{delay: function(i) {
            return i * 2;
        }}
});

 

Carl is exactly right about why a function-based delay on a regular tween wouldn't work. The staggerTo() spits back an array of tweens - that's why it'll work there. And you don't have to define a stagger if you don't want to. 0 is the default. 

[Dipscom]

I haven't quite grasped what Carl has said but I am confident it will eventually sink in.

 

@PointC more coffee to you, sir. Whatever day you may be having, coffee is the solution.

 

Thanks Jack. I shall cheat like you are suggesting just for the sake of doing so (as mentioned before, I had it working with the for loop).