[require("gsap/gsap-core")]

Thanks for your reply. the weird thing is that my code is broken until I delete it! Not very useful...

[require("gsap/gsap-core")]

Hi I wonder if anyone can shed light on this for me.

 

I (intermitantly) find the line:

 

const { default: gsap } = require("gsap/gsap-core")

added to line 1 of my main.js code in vscode. 

 

Does this mean that it does not have access to the GSAP library?

 

I am linking to the cdn in my html as follows:

 

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>

<script src="main.js"></script>

</body>

</html>

 

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

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!

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

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

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

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

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

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