Jump to content
GreenSock

sebHewelt

Docs - is this technically correct?

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

Hey, I'm new here. Digging the docs, i found this at the beginning, and I'm confused:

docs.png.af54af7939d69e9f32b0494bdab0385c.png

 

The comment says something about the situation when jQuery is included, then uses regular DOM selector example. You don't actually need jQuery for selecting all the elements with specific class. So i propose to change this example :). I believe this may be confusing for beginners like me. If you don't see it that way, just delete this topic and forget about it.  

 

PS Do you have docs open sourced for proposals of changes?

Link to comment
Share on other sites

Yes it is correct. If jQuery is available on page then GSAP will use jQuery as selector. So you can pass first argument as if you are using jQuery selector instead of using jQuery syntax directly. So basically instead of writing

TweenLite.to($('.myClass'), 1, {});

you can write

TweenLite.to('.myClass', 1, {});

 

Note: GSAP only uses the dollar sign, so in case you are using anything else that uses $ sign, for example mootools then you will run into unexpected behaviors. In such cases you can use

 

TweenLite.selector = YOUR_SELECTOR_ENGINE;

 

and set selector of your choice, as stated right above docs you posted.

  • Like 2
Link to comment
Share on other sites

You see, even your way of explaining it includes a jQuery example. That's what i meant here. I know the comment is correct - the example it refers to could be more clear :)

Link to comment
Share on other sites

No it states that GSAP will use jQuery(only dollar sign) as it is very commonly used and that you don't need to do anything else to use jQuery as selector if you are already using it. But you have freedom to use other selector engines if you want. Seemed pretty straight forward to me.

  • Like 1
Link to comment
Share on other sites

Hi sebHeweit,

 

Welcome to the forums.

You're right, that comment could be a little mis-leading. jQuery is NOT required to select a target via a class.

If jQuery is available it will be used, but its not necessary.

 

As stated earlier in the docs, TweenLite will use document.querySelectorAll() where available which these days is every browser. 

 

I updated the TweenLite docs to simply say

 

//tween the element with ID of "myID"
TweenLite.to("#myID", 2, {backgroundColor:"#ff0000", width:"50%", top:"100px", ease:Power2.easeInOut});
 
//tween every element with the class "myClass" like this: 
TweenLite.to(".myClass", 2, {boxShadow:"0px 0px 20px red", color:"#FC0"});

 

 

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