TweenMax.selector

TweenMax.selector : * = document.getElementById()

[static] The selector engine (like jQuery) that should be used when a tween receives a string as its target, like TweenLite.to("#myID", 1, {x:"100px"}).

Details

The selector engine (like jQuery) that should be used when a tween receives a string as its target, like TweenLite.to("#myID", 1, {x:"100px"}). By default, TweenLite will look for window.$ and then window.jQuery and if neither is found, it will default to document.getElementById() (in which case it will also strip out any leading "#" in any IDs it receives). Feel free to use any selector you want: jQuery, Zepto, Sizzle, or your own. Set it like this:

TweenLite.selector = YOUR_SELECTOR_ENGINE;

If jQuery is loaded (or anything that's defined as the industry standard window.$), you don't need to do anything - TweenLite will automatically sense (and use) it. But TweenLite does NOT have any dependencies on jQuery or any specific selector engine. If you don't load any, TweenLite will use document.getElementById() which will at least allow you to define things with IDs.

//tween the element with ID of "myID"
TweenLite.to("#myID", 2, {backgroundColor:"#ff0000", width:"50%", top:"100px", ease:Power2.easeInOut});

//or if jQuery is loaded, you can do more advanced selecting like all the elements with the class "myClass" like this:
TweenLite.to(".myClass", 2, {boxShadow:"0px 0px 20px red", color:"#FC0"});


For maximum performance it is typically best to store the results of a selector in a variable if you need to reference the same set multiple times:

//slightly slower because the selector engine needs to find the same elements twice:
TweenLite.to(".myClass", 2, {left:"100px"});
TweenLite.to(".myClass", 2, {top:"200px", delay:2});

//it's a bit faster to store it in a variable that you reuse like this instead:
var target = $(".myClass");
TweenLite.to(target, 2, {left:"100px"});
TweenLite.to(target, 2, {top:"200px", delay:2});


The only requirements for the selector engine is that it must have an "each()" method that iterates through each element in the results and "this" inside the function refers to the DOM element, and it must make the DOM elements accessible via index notation like selectorResults[0], selectorResults[1], etc. This is pretty standard among selector engines.

Copyright 2017, GreenSock. All rights reserved. This work is subject to theterms of useor for Club GreenSock members, the software agreement that was issued with the membership.

Get GSAP

Version: 1.20.3 updated 2017-10-02

Core

    Extras

      Plugins

        By using GreenSock code, you agree to the terms of use.

        Help support GreenSock by becoming a member

        Join Club GreenSock