I'm new to GSAP and i want add a hover each item across all pages if my anchor tag or button has a class name of "primary-btn" and whenever it hovers cursor will change to view more

[Louienator]

Here is a fiddle i made

https://jsfiddle.net/p1evx86c/59/

[mvaneijgen]

Hi @Louienator you have to scope your code. Right now you're telling GSAP animate ALL my .primary-btn, but you want to create logic for each .primary-btn. With the jQuery .each() function you get access to the this property, which is the specific element each time the function is run. https://jsfiddle.net/qf1msv76/

 

Side note, you are using some really old syntax of GSAP. Version 3 is out now a few years already and there has been a lot of improvements to the syntax, so if you're new I would definitely focus on the new syntax. This you can here https://greensock.com/docs/ or if you want to migrate some code over, see this post

 

Hope it helps and happy tweening! 

[Louienator]

Thank you so much @mvaneijgen will try this new syntax.. will get back to you once i got the output that i wanted.. Cheers and Happy Halloween

[Louienator]

hi @mvaneijgen, i've migrated my code to gsap 3 and i'm confused still when i hover the first item, all 4 items will animate.. what i want is that each box will just animate when each of them is hovered. is it ok to ask for a sample? thank you so much. apologies for being a slow learner.

https://jsfiddle.net/kem6247d/31/

[mvaneijgen]

5 hours ago, mvaneijgen said:

function you get access to the this property, which is the specific element each time the function is run. https://jsfiddle.net/qf1msv76/

Have you seen the Fiddle I linked? There is updated code that uses this instead of the class element 

[Louienator]

Wow!! Thanks a lot mvaneijgen.. This is what i was going to achieve for days.. hope this will also work on other pages with same classname.. Cheers.. And apologies if i haven't seen the fiddle

[Louienator]

What i noticed with gsap 3 is that it is simplified rather than the gsap 2. Anyways, thank you so much

[Louienator]

Hi mvaneijgen, i have something to clarify with regards to GSAP 3. Is the CSSRulePlugin deprecated or not supported in GSAP 3? thanks

[mvaneijgen]

Seems that way https://greensock.com/docs/v3/Plugins/CSSRulePlugin 

 

With questions like this its always a good idea to also layout your problem, so we can understand the root issue you are facing and find a solution for that. 

[GreenSock]

6 hours ago, Louienator said:

Hi mvaneijgen, i have something to clarify with regards to GSAP 3. Is the CSSRulePlugin deprecated or not supported in GSAP 3? thanks

CSSRulePlugin is still in GSAP 3. In the vast majority of cases, though, it's just not needed - it's better/cleaner to just use CSS variables instead, as the docs indicate. 

[Louienator]

Thanks for the quick reply mvaneijgen. I'll just create a class instead of the pseudo element. Just to be safe. GSAP is fun and quite a challenge for us new into GSAP..

 

[Louienator]

2 hours ago, GreenSock said:

CSSRulePlugin is still in GSAP 3. In the vast majority of cases, though, it's just not needed - it's better/cleaner to just use CSS variables instead, as the docs indicate. 

Because what i've seen in the docs that mvaneijgen gave was "deprecated".. And i've been getting an error of 

"GSAP target not found https://greensock.com" and "GSAP target undefine not found, https://greensock.com"

[GreenSock]

5 hours ago, Louienator said:

Because what i've seen in the docs that mvaneijgen gave was "deprecated".. And i've been getting an error of 

"GSAP target not found https://greensock.com" and "GSAP target undefine not found, https://greensock.com"

It's difficult to know what's causing that error without seeing a minimal demo, but it sounds like you're trying to select something that doesn't exist. If you still need help, please make sure you provide a minimal demo that clearly shows the problem and we'd be happy to take a look. 

[Louienator]

Hi mvaneijgen, i'm applying on what you've taught me earlier and added some new classes, but the problem is when i hover each item, both lines will animate not just the respective line when i hover the circle. here's the fiddle

https://jsfiddle.net/apm2qfkh/19/

[mvaneijgen]

Same issue as before, you have to scope your selectors to the current element you're targeting. If I where you I would do a basic course on Javascript, just go on YouTube and watch a few tutorials.

 

https://jsfiddle.net/pzvf26hq/

[Louienator]

1 minute ago, mvaneijgen said:

Same issue as before, you have to scope your selectors to the current element you're targeting. If I where you I would do a basic course on Javascript, just go on YouTube and watch a few tutorials.

 

https://jsfiddle.net/pzvf26hq/

I'm studying jquery as of the moment on udemy try to tinker on gsap coz' i found the animations fascinating.. That's why i quickly dived in.. apologies for that..

[mvaneijgen]

No need to apologize, but missing the fundamentals, will result in getting stuck a lot. That's why getting in some basic Javascript knowledge can go a long way!

[Louienator]

Just now, mvaneijgen said:

No need to apologize, but missing the fundamentals, will result in getting stuck a lot. That's why getting in some basic Javascript knowledge can go a long way!

Thanks for the great advise mate.. Cheers..

[Louienator]

3 minutes ago, mvaneijgen said:

No need to apologize, but missing the fundamentals, will result in getting stuck a lot. That's why getting in some basic Javascript knowledge can go a long way!

And 1 more thing, with regards to CSSRulePlugin, as Jack said earlier that the CSSRulePlugin is still in the version 3, the code couldn't find my pseudo element.. this is just a sample but if you can see the error i'm referring to regarding the CSSRulePlugin.. i've imported the CSSRulePlugin


https://jsfiddle.net/8vetu3wr/9/

[GreenSock]

There are several problems with your code in that demo: 

1. You're calling this.querySelector( rule ). "this" in that context is a jQuery object which doesn't have a querySelector() method. Also, there's absolutely no point to doing any of that - you should just use the rule as the target of the tween anyway. 
2. You have multiple rules set up for the ":after", and I don't think you're targeting the proper one. You've got another that has a transform applied that's overruling it. 

Again, it's just cleaner to use CSS variables anyway, as shown in the docs. Good luck! 👍 If you get stuck and have a GSAP-related question, post back here. 

[Louienator]

Hi @Jack and @mvaneijgen, good day. i'm just continuing with this thread coz' it's related to the topic. It's a hover but on the "go" area.

 

So, i'm applying mvaneijgen's code but, the "this.querySelector" is firing an error, "this.querySelector is not a function". Is there something that i lack? thank you so much.. here's my code

 

https://jsfiddle.net/o1fgb2cx/56/

[mvaneijgen]

Hi @Louienator, ha 9 months later 🙃

 

Arrow functions lack their own scope (eg this doesn't work. Or it does, but it gets the highest this, which in this case would be the browser window). I advise you to use console.log(this) and see what it logs in the console, so you can check what you expect is true with what you get.

 

I have substituted the arrow function in the .each() method with a regular function. Furthermore, I have relocated the mouse enter and leave events within the each loop to solely animate the current .links. However, it is important to note that these mouse functions ARE arrow functions, so there this are in context to the .each() function. If you swap these arrow functions for normal functions, the this would not work, because there would be no animation on the this context.

 

I hope this explains it well, it has nothing to do with GSAP, but more with how Javascript/jQuery handles things. 

 

https://jsfiddle.net/guqjt0ys/

[Louienator]

Hi @mvaneijgen, thanks for the quick explanation on that arrow function, i've dissected line by line and what's the use and where did i go wrong.. I kind of understand a bit, slowly.

 

And lastly, i've tried a non-reverse mouse out that has different animation when the mouseleave method is triggered. i've edited your code..

 

https://jsfiddle.net/359m8qzb/5/

[mvaneijgen]

Animating the same element with different timelines is hard to manage. That is why animating with just one timeline is much simpler. 

 

I've modified the GSAP code a bit and updated it to V3 syntax. The duration now gets its own property, which makes it much easier to read. 

 

There are some properties you rather not be animating, these are things like top, left, right, bottom, height, width, you are better of animating the transform properties y, x, scale, ect. So in your example instead of width and height I animate scale (note you can also use scaleY or scaleX)

 

What I've done is to create just one timeline called tl and I've add labels to certain points on the timeline and then on the mouse enter and leave I animate between two labels (see the docs for more info https://greensock.com/docs/v3/GSAP/Timeline/tweenFromTo()).

 

Hope it helps and happy tweening! 

 

https://jsfiddle.net/hjd1g597/

[Louienator]

Hey @mvaneijgen, Happy New Year

Me again.. Is there a way to have a multiple button with different animation that's been wrap with 1 each method because they have just the same parent class. Or refactor this or is there any approach to make my code efficient? thanks

https://jsfiddle.net/z9eLdvgh/20/