Use of jQuery in GSAP

[jordan97]

I have a question why do we need to use jQuery in GSAP. Recently I was working on an assignment in which we were to use jQuery. If we are using GSAP then why is the another framework being added into it? 

 

[Trapti]

It is the way your project is setup. There is no dependency of using any framework with GSAP. Whatever is done with jQuery in your setup can be done in vanilla Js. 

[GreenSock]

Yep, that's exactly right. There is absolutely no reason to use jQuery with GSAP. But it's totally fine if you want to.

[jordan97]

Thanks for your reply guys, so If I want to use the same function in my code with the help of GSAP what will be that, if I want to avoid use of jQuery? I am referring to the jQuery which has been used in the last.

[Trapti]

Hey, helping in this kind of problems is kind of not aligned with this forum, as this is to help find solutions for GSAP related queries. 
Anyways since you asked.
I have not used  jQuery practically but by reading the code it looks like last function is to set background color to the element by css. This article will give you idea how to set CSS using Js to the element. https://dev.to/karataev/set-css-styles-with-javascript-3nl5. Or just search what .css function do in jQuery and then search how you can do the same thing in JS. 
Hope this will help you!

 

[jordan97]

Tysm for the reply, I will check out the link and try to figure out how jQuery and GSAP are interrelated.

[GreenSock]

To set the background color with GSAP instead of jQuery:

// jQuery
$(restID + " .home-icon").css({
  backgroundColor: highlightColour
});

// GSAP
gsap.set(restID + " .home-icon", {
  backgroundColor: highlightColour
});

Have fun!

[ektorp]

@GreenSock Yes, I have found myself using GSAP a lot lately with just setting various CSS properties as shown above - the typical things we did with jQuery. I am not using jQuery much anymore like many of us and using GSAP like this is super useful as a utility type library, of course in addition to animations. Is GSAP commonly used this way and is it recommended or are there any possible considerations to keep in mind with this approach? By this approach, I mean using GSAP to extensively manipulate DOM elements by showing, hiding, and instantly setting any CSS property to an element, and not necessarily animating it.

[OSUblake]

6 minutes ago, ektorp said:

Is GSAP commonly used this way and is it recommended or are there any possible considerations to keep in mind with this approach? By this approach, I mean using GSAP to extensively manipulate DOM elements by showing, hiding, and instantly setting any CSS property to an element, and not necessarily animating it.

 

Yep, it's totally fine and nothing to worry about. At the end of the day, jQuery and GSAP are setting CSS the exact same way, they are just changing the inline style of the element. 😉

 

myElement.style.display = "block";

 

One advantage of using GSAP is for setting transforms, which jQuery doesn't do that well, and it's best to always set transforms with GSAP if plan on animating them. GSAP also has a bunch of other features, like function based values and random values.

 

gsap.set(".box", {
  x: i => i * 100,
  y: "random(0, 300)"
})

 

[ektorp]

1 hour ago, OSUblake said:

 

Yep, it's totally fine and nothing to worry about. At the end of the day, jQuery and GSAP are setting CSS the exact same way, they are just changing the inline style of the element. 😉

 

myElement.style.display = "block";

 

 

One advantage of using GSAP is for setting transforms, which jQuery doesn't do that well, and it's best to always set transforms with GSAP if plan on animating them. GSAP also has a bunch of other features, like function based values and random values.

 

gsap.set(".box", {
  x: i => i * 100,
  y: "random(0, 300)"
})

 

 

Great, thx for confirming @OSUblake. I know this simple...I just find this a bit easier and faster than the native JS syntax, especially when already using GSAP.  Another nice benefit here is not having to manually loop through various groups of content elements and set values. GSAP does this with a single line of code.