correct way to use oncomplete with passed variable?

[Guest kariannking]

function fadeAndRemove() {
		if (arrAllPops.length >= 3) {
			for (var x = 0; x < arrAllPops.length; x++) {
				TweenMax.to(arrAllPops[x], 0.5, {
					opacity: 0,
					onComplete: removeManyPops,
					onCompleteScope: x
				});
			}
		}

		function removeManyPops(ff) {
			$(arrAllPops[ff]).remove();
			arrAllPops.splice(ff, 1);
		}
		console.log(arrAllPops);
	} // end of fadeAndRemove function

I think I'm using onCompleteScope wrong.. basic premise is once an array gets larger then 3 elements, tween away all those greater than 3 and, once the tween has finished, remove those elements from the dom and the array.

[OSUblake]

i think you got scope mixed up with params. Scope is an object, and is what 'this' refers to inside the function. You'll see people do this a lot in jQuery with an element inside a function. Something like var $this = $(this);

TweenMax.to(arrAllPops[x], 0.5, {
  opacity: 0,
  onComplete: removeManyPops,
  onCompleteScope: arrAllPops[x]
});

function removeManyPops() {
  $(this).remove();
  var index = arrAllPops.indexOf($(this));
  arrAllPops.splice(index, 1);
}

I think what you were trying to do is pass in the index to your function.

TweenMax.to(arrAllPops[x], 0.5, {
  opacity: 0,
  onComplete: removeManyPops,
  onCompleteParams: [x, "hello"]
});

function removeManyPops(ff, msg) {
  $(arrAllPops[ff]).remove();
  arrAllPops.splice(ff, 1);
  console.log(msg);
}

You could combine scope and params, but an easier way would be to use the bind method of a function. The first parameter will be the scope, or you can put undefined or null if there isn't one. Everything you place after that will passed to the function. Here's some info on using it. It does the same thing as jQuery's $.proxy() method.

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

function fadeAndRemove() {
  for (var i = 3; i < arrAllPops.length; i++) {
    TweenMax.to(arrAllPops[x], 0.5, {
      opacity: 0,
      onComplete: removeManyPops.bind(arrAllPops[x], x, "Hello"),
    });
  }

  function removeManyPops(ff, msg) {
    $(this).remove();
    arrAllPops.splice(ff, 1);
    console.log(msg);
  }
}

[Jonathan]

To add to Blakes great advice.

 

Here is a link to GreenSock TweenMax Docs:

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/

• onComplete : Function - A function that should be called when the animation has completed.
   
• onCompleteParams : Array - An Array of parameters to pass the onComplete function. For example,TweenLite.to(element, 1, {left:"100px", onComplete:myFunction, onCompleteParams:[element, "param2"]}); To self-reference the tween instance itself in one of the parameters, use "{self}", like:onCompleteParams:["{self}", "param2"]
   
• onCompleteScope : Object - Defines the scope of the onComplete function (what "this" refers to inside that function).

And a link to the GSAP to() method Docs:

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/to/