Query engine

[scubajosh]

has this been tested with any other selector query engine like qwery? I want to get this working on a lighter framework than jquery its a little to heavy for mobile stuff so I use enderjs.

[GreenSock]

You can use pretty much anything for selecting your stuff, but the only built-in recognition inside TweenLite/Max is for jQuery (for obvious reasons). Hopefully your preferred selector allows you to easily get at the contents. For example, if it is like an array and you're selecting a single object, maybe you could do this:?

 

TweenLite.to( mySelector("#blah")[0], 1, {...})

 

I purposely stayed away from making the engine into a selector for many reasons (I can elaborate if you want).

 

Make sense?

[Randall]

I'm working on mobile JavaScript menu and not using jQuery. The only trick is to ensure that you tween valid objects/elements. In the case where you use associative type selectors (those that require some engine or logic to 'acquire' a reference to the object/element) you just have to make sure you pass in a valid object/element.

 

So, like in Flash, you can refer to an object via an associative nature:

// IF someMovieClipName instance name exists in this, it works
TweenLite.to(this['someMovieClipName'], 1, {prop:value});

 

In JavaScript, without a selector engine finding the object/element reference, you'll like need to create a wrapper function yourself that gets it, or leverage whatever engine you're using and then pass that object/element reference into the tween, such as with jQuery selectors, which makes things super easy by $('#someElementId').

// PROBABLY WON'T WORK
TweenLite.to('someElementName', 1, {css:{prop:value}});

// PROBABLY WILL WORK, IF THE 'someElementName' EXISTS
function getInstance(idSelector){
  return document.getElementById(idSelector);
}
TweenLite.to(getInstance('someElementName'), 1, {css:{prop:value}});

// OR ALTERNATIVELY, USE VARIABLE HOLDERS IN THE APPLICATION SCOPE
var theElement = document.getElementById('someElementName');
TweenLite.to(theElement, 1, {css:{prop:value}});