GSAP 2.0

wow we are going to learn thing from the cursor, mouse trail, buttons and more

• this is the course for today

cursor

• normally you can make events for the cursor by using eventListeners
  • mouseEnter
  • mouseMove

window.addEventListener('mousemove',(e) => {
 
})

courses

first course

• example code
• x:e.clientx is used for the coordinates of the mouse. This is the x axis
• stagger

window.addEventListener('mousemove', (e) => {
  gsap.to('.cursor', {
    x:e.clientX,
    y:e.clientY
  })
})

• with this code you can select the cursor and creates and object that follows
• console.log(e.target):

  if (e.target.nodeName == 'A') {
    gsap.to('.cursor', {
      scale:1,
    })
    
  } else {
    gsap.to('.cursor', {
      scale:0.33
    })
  }
})

• with this code you make an event where if the mouse is over an <a> element, it will modify the size

  if (e.target.nodeName == 'A' || e.taget.closest('a')) {

• here you select the <a> element, but also the children inside the <a>

second course

• example code

const header = document.querySelector(".header");
const headerImage = document.querySelector(".header img");
 
 
let sizeW = headerImage.offsetWidth;
let sizeH = headerImage.offsetHeight;
 
if (header && headerImage) {
  header.addEventListener("mousemove", (e) => {
 
    gsap.to(headerImage, {
      x:e.clientX - sizeW / 2,
      y:e.clientY - sizeH / 2,
    });
  });
}
 

this is the eventual code I came up with.

1. I had to define the width and height of the image.
   1. I used offsetWidth and offsetHeight to define this.
   2. I had to select this in a new variable

let sizeW = headerImage.offsetWidth;
let sizeH = headerImage.offsetHeight;

I checked this with console.log(sizeH). Which when you check this in the console of the browser, it will return a value.

2. after that, you can create the gsap animation
   1. here you create a gsap animation and call the event.
   2. x:e.clientX - sizeW / 2, you will define the width and takes the width of the image and slice it by 2, which centers it.

if (header && headerImage) {
  header.addEventListener("mousemove", (e) => {
    gsap.to(headerImage, {
      x:e.clientX - sizeW / 2,
      y:e.clientY - sizeH / 2,
    });

third course

example code

• I need to use canvasrenderingcontext2d