Jump to content
Search Community

Add Index parameter to Modifiers Plugin function?

katerlouis test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

TweenMax.to(".lots-of-elements img", 1, { x: 50, modifiers: {
	x: function(value, target) {
	// I would like to add some logic depending on the index of the element
      	// just like function-based values can, but there is no paremeter :'(
      	
      	// luckily, in my case, I can do this:
      	var index = $(target).index();
      		// some logic
      		... var newVlaue ...
      		return newValue;
    }
});

 

I would like to add some logic depending on the index of the element, just like functions can do–

But modifiers plugin doesn't have a paremter for that :'(

 

You could work around this by finding the index some other way, maybe with jQuery's .index()

But that may not always be possible and when you use a something like this, the work around fails:

 


var elements = [
  "#element1",
  ".stage h1",
  ".slider .slide span"
];

TweenMax.to(elements, 1, { x: 50, modifiers: {
  x: function(value, target) {
   	// howww to get the index?! 
  }
})

 

Is there a reason that there is no index param? And would that be worth to add? I say yes 8)

 

modifiers: {
  x: function(value, target, index) {
 	// some logiiic
    return newValue;
  }
};

 

 

 

Link to comment
Share on other sites

 

It seems like it could be a useful feature worthy of consideration. 

Like all things, we have to weigh the file size and performance implications against the demand.

As you have shown, there are ways to accomplish what you need already.

 

Thanks for the suggestion.

 

 

 

Link to comment
Share on other sites

18 hours ago, kreativzirkel said:

Is there a reason that there is no index param?

 

Yep. It's a LOT more complex than you might imagine due to performance optimizations and the flow of code. But I'll spend some more time looking for a way to make it happen (no promises). You can definitely work around it, even in your second example. Here I use an "indexify()" function to which you feed in the elements and the modifiers object and it'll do all that work for you automagically...

 

var elements = [
  "#element1",
  ".stage h1",
  ".slider .slide span"
];

TweenMax.to(elements, 1, { x: 50, modifiers: indexify(elements, {
      x: function(value, target, index) {
        console.log(index, target);
      }
    })
});
                          
function indexify(elements, vars) {
    var a = [].slice.call(document.querySelectorAll(typeof(elements) === "string" ? elements : elements.join(", "))),
        wrap = function(func) {
            return function(value, target) {
                func(value, target, a.indexOf(target));
            }
        },
        p;
    for (p in vars) {
        vars[p] = wrap(vars[p]);
    }
    if (vars.scale) { //scale is an alias for scaleX and scaleY
        vars.scaleX = vars.scaleY = vars.scale;
        delete vars.scale;
    }
    return vars;
}

 

Obviously that indexify() function could be reused as much as you want.

 

Does that help?

 

 

  • Like 4
Link to comment
Share on other sites

Like I said; in my particular case I found a work around – No time to test it in depth; but it looks promising :)

 

This was more of a general question; curiosity paired with the urge to help GSAP evolve. You guys can't see all usecases; so I just asked :)

 

I still hope it will be implemented though 8)

Link to comment
Share on other sites

  • 2 years later...
On 3/15/2018 at 12:00 PM, GreenSock said:

 

Yep. It's a LOT more complex than you might imagine due to performance optimizations and the flow of code. But I'll spend some more time looking for a way to make it happen (no promises). You can definitely work around it, even in your second example. Here I use an "indexify()" function to which you feed in the elements and the modifiers object and it'll do all that work for you automagically...

 


var elements = [
  "#element1",
  ".stage h1",
  ".slider .slide span"
];

TweenMax.to(elements, 1, { x: 50, modifiers: indexify(elements, {
      x: function(value, target, index) {
        console.log(index, target);
      }
    })
});
                          
function indexify(elements, vars) {
    var a = [].slice.call(document.querySelectorAll(typeof(elements) === "string" ? elements : elements.join(", "))),
        wrap = function(func) {
            return function(value, target) {
                func(value, target, a.indexOf(target));
            }
        },
        p;
    for (p in vars) {
        vars[p] = wrap(vars[p]);
    }
    if (vars.scale) { //scale is an alias for scaleX and scaleY
        vars.scaleX = vars.scaleY = vars.scale;
        delete vars.scale;
    }
    return vars;
}

 

Obviously that indexify() function could be reused as much as you want.

 

Does that help?

 

 

Tried this, Didnt work

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...