Jump to content


jQuery Sizzle?

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

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.

Link to comment
Share on other sites

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



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" });


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.




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).

  • Like 4
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.