jordan97 Posted March 5, 2022 Share Posted March 5, 2022 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? Link to comment Share on other sites More sharing options...
Trapti Posted March 5, 2022 Share Posted March 5, 2022 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. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted March 5, 2022 Share Posted March 5, 2022 Yep, that's exactly right. There is absolutely no reason to use jQuery with GSAP. But it's totally fine if you want to. Link to comment Share on other sites More sharing options...
jordan97 Posted March 5, 2022 Author Share Posted March 5, 2022 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. Link to comment Share on other sites More sharing options...
Trapti Posted March 5, 2022 Share Posted March 5, 2022 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! 1 Link to comment Share on other sites More sharing options...
jordan97 Posted March 5, 2022 Author Share Posted March 5, 2022 Tysm for the reply, I will check out the link and try to figure out how jQuery and GSAP are interrelated. Link to comment Share on other sites More sharing options...
GreenSock Posted March 6, 2022 Share Posted March 6, 2022 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! 1 Link to comment Share on other sites More sharing options...
ektorp Posted March 6, 2022 Share Posted March 6, 2022 @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. Link to comment Share on other sites More sharing options...
OSUblake Posted March 6, 2022 Share Posted March 6, 2022 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)" }) 2 1 Link to comment Share on other sites More sharing options...
ektorp Posted March 6, 2022 Share Posted March 6, 2022 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now