What is the GSAP equivalent of JQuery 'event.currentTarget'?

[gotofig2]

Hi, complete beginner to all things code here, but I used my lockdown to try and improve my web design skills. In the codepen example of an animated menu I'm building I want to select each of the revealed .nav-items and change its colour, scale, text-shadow size etc in its hover state. So far I can only work out how to change the colour using JQuery.css. Is there an equivalent of 'event.currentTarget' I can use in GSAP3?

See the Pen MWyRvad?editors=0010 by gotofig2 (@gotofig2) on CodePen

[b1mind]

Welcome ! I Like where you going with this very cool design.

 

Short answer is yes, drop it in just like any other props ! Ie: 

gsap.timeline().to(".title__kerbside", {
       x: -10,
       scale: 1.1,
       duration: 0.4,
       color: "rgb(101, 255, 255)", // define like any other prop with value in " "
        ease: "power2"
     })
     gsap.to(".title__karaoke", {
       x: 10,
       scale: 1.1,
       duration: 0.4,
       color: "rgb(101, 255, 255)", // just define it like this
     ease: "power2"..................

// You can also set too
gsap.set("#myElement", {backgroundColor: "white"})

//take note it needs camelCase just like javascript likes so background-color is backgroundColor ect...

Also I recently learned about 

gsap.getProperty("#myElement", "backgroundColor");
gsap.getProperty("#myElement", "x"); //works with GSAP transform properties too. This would return something like "100px"

 

[gotofig2]

Hi b1Mind and thnaks so much for responding.

That's great advice about adding the color property in my GSAP rather than the jquery and gives me a much more pleasing transition on the 'kerbside' and 'karaoke' elements.

I'm still a bit confused about how to do the following bit better:

$(".nav-item").on("mouseenter", function(event){
    $(event.currentTarget)
      .css("color", "white")
  

What I want acheive is, when mouse enters any .nav-item element, only that targeted .nav-item will be effected by hover effects such as color change, scale, y-reposition etc. can I write something in GSAP which is the equivalent of jquery's event.currentTarget. Or is that what #myElement does?

 

Thanks in advance

[b1mind]

sorry I been up all night, I did not notice you were trying to do. ( though its right in the title .. just got hung up on that jquery.css part hehe)

 

  $(".nav-item")
    .on("mouseenter", function(event){
      gsap.set(event.currentTarget, {color: 'white'})
    })
    .on("mouseleave", function(event){
      let ct = event.currentTarget    // might be best to set a var but you can access it same way.
      gsap.set(ct, {color: 'yellow'})
   })

You can ofc expand on this and make a time line like you did above.

[Shaun Gorneau]

2 hours ago, gotofig2 said:

What I want acheive is, when mouse enters any .nav-item element, only that targeted .nav-item will be effected by hover effects such as color change, scale, y-reposition etc. can I write something in GSAP which is the equivalent of jquery's event.currentTarget. Or is that what #myElement does?

 

Hi @gotofig2,

 

This is just a matter of your selector specificity ... along with scope within the callback.

 

See the Pen GRZaRqJ by sgorneau (@sgorneau) on CodePen

 

Using .nav-item as your selector for onmouseenter/leave and $(this), you can target the hovered element.

 

Also, event.currentTarget is pure Javascript (not specific to jQuery), but I'm not sure if you were implying that it was a jQuery thing.

 

--

 

Some other notes ... putting a scale or autoAlpha of 0 on something will put it out of reach of a hover/mouseenter event (and event.target). Opacity alone is accessible to these events. But any combo with scale 0 will render it inaccessible.

 

In the cases where you need something to be "invisible" but actionable ... it's best to stick with opacity or backgroundColor ... and not use scale 0.

 

See the Pen ZEWNEyo?editors=1010 by sgorneau (@sgorneau) on CodePen

 

 

[gotofig2]

Amazing response thanks @b1Mind That was exactly what I was looking for. Really appreciate the help.

[gotofig2]

Thanks @Shaun Gorneau Really helpful, especially the extra info about transparency/scale and accessibility.

Really appreciate the input, as I said I am a total beginner and would be floundering around for hours (days?) without such helpful advice!

[Shaun Gorneau]

@gotofig2, happy to help!