jQuery Sizzle?

[markthema3]

Is it possible to use jQuery's Sizzle selector library (http://sizzlejs.com/) as an alternative to using the CSS and CSS Rules plugins? It seems like the CSS Rules plugin is trying to do what Sizzle does but doesn't do it as well.

[jamiejefferson]

I think you may have confused the differences between TweenLite selector, CSSPlugin, and CSSRulePlugin. They are all used for different tasks:

 

Selector

The TweenLite selector will look for one of the following (in this order):

• window.$
• window.jQuery
• document.getElementById

If jQuery is included in the page, then jQuery's Sizzle selector will be used. If you need to manually set the selector to something else, it's as simple as this:

TweenLite.selector = window.Sizzle;

Any string passed to the target parameter of a tween will be run through the selector first. e.g.

// once jQuery has loaded
TweenLite.to("#element > div", 1, { color: "blue" });

// works the same as
var target = $("#element > div");
TweenLite.to(target, 1, { color: "blue" });

CSSPlugin

This is what enables the manipulation of styles for DOM elements. (from the docs) With the help of the CSSPlugin, GSAP can animate almost any css-related property of DOM elements including the obvious things like width, height, margin, padding, top, left, and more plus more interesting things like transforms (rotation, scaleX, scaleY, skewX, skewY, x, y, rotationX, and rotationY), colors, opacity, and lots more.

 

 

CSSRulePlugin

This is for modifying globally applied stylesheets directly. (from the docs) Allows TweenLite and TweenMax to animate the raw style sheet rules which affect all objects of a particular selector rather than affecting an individual DOM element's style (that's what the CSSPlugin is for).

[Carl]

Jamie is exactly right.

 

This example shows how to tell TweenLite to use Sizzle as the selector engine

http://codepen.io/GreenSock/pen/143f14a576109e1978a440d869db4e55