Use GSAP Stagger to animate the scale of the same elements

[momo12]

Hello guys,

 

I'm exploring more GSAP. I have a question. How can I tell GSAP to change the scale of the ".cursor" class using Stagger when they move? I want the "Cursor" classes which follow the main cursor div be smalle from a scale like 1 to 0.5 using Stagger.

 

 

 

See the Pen zYjqgJX by talewoy290 (@talewoy290) on CodePen

[Rodrigo]

Just use stagger in the same way you're using it in the follow code:

function cursorHover(e)
{
  gsap.to ($cursor, {
    scale: 0.5,
    stagger: 0.15,
  });
  gsap.to ($cursorHover, {
    scale: 3,
  });
}

function cursor (e)
{
  gsap.to ($cursor, {
    scale: 1,
    stagger: 0.15,
  });
  gsap.to ($cursorHover, {
    scale: 0.001,
  });
}

Play with the stagger values until you find the ones that look better.

 

Happy Tweening!!!

[momo12]

42 minutes ago, Rodrigo said:

Just use stagger in the same way you're using it in the follow code:

function cursorHover(e)
{
  gsap.to ($cursor, {
    scale: 0.5,
    stagger: 0.15,
  });
  gsap.to ($cursorHover, {
    scale: 3,
  });
}

function cursor (e)
{
  gsap.to ($cursor, {
    scale: 1,
    stagger: 0.15,
  });
  gsap.to ($cursorHover, {
    scale: 0.001,
  });
}

Play with the stagger values until you find the ones that look better.

 

Happy Tweening!!!

It still doesn't work. The all cursors are the same. do you think I'm doing something wrong? I'm looking to create a tail for the cursor and as you know, the tip is always smaller.

[Rodrigo]

Sorry I though you wanted to stagger the dots when they entered the white box, not as they followed the cursor.

 

There are two approaches I can think of, create a timeline with a fromTo instance for the scale and another to instance (that starts at the same time) for the scale:

function cursorMover(e)
{
  gsap.timeline()
    .fromTo ($cursor, {
    scale: 0.5,
  }, {
    duration: 0.3,
    stagger: 0.05,
    scale: 1,
  })
    .to ($cursor, {
    x: e.clientX,
    y: e.clientY,
    duration: 0.3,
    stagger: 0.05,
  }, "<");
  gsap.to ($cursorHover, {
    x: e.clientX,
    y: e.clientY,
  });
}

The other approach is to create a set instance and a single tween to handle both the position and the scale stagger:

function cursorMover(e)
{
  gsap.set($cursor, { scale: 0.5 });
  gsap.to ($cursor, {
    x: e.clientX,
    y: e.clientY,
    duration: 0.3,
    stagger: 0.05,
    scale: 1,
  });
  gsap.to ($cursorHover, {
    x: e.clientX,
    y: e.clientY,
  });
}

Test both and see which one is the best for what you intend to do.

 

Happy Tweening!!!

[momo12]

4 minutes ago, Rodrigo said:

cursor

 

52 minutes ago, Rodrigo said:

Sorry I though you wanted to stagger the dots when they entered the white box, not as they followed the cursor.

 

There are two approaches I can think of, create a timeline with a fromTo instance for the scale and another to instance (that starts at the same time) for the scale:

function cursorMover(e)
{
  gsap.timeline()
    .fromTo ($cursor, {
    scale: 0.5,
  }, {
    duration: 0.3,
    stagger: 0.05,
    scale: 1,
  })
    .to ($cursor, {
    x: e.clientX,
    y: e.clientY,
    duration: 0.3,
    stagger: 0.05,
  }, "<");
  gsap.to ($cursorHover, {
    x: e.clientX,
    y: e.clientY,
  });
}

The other approach is to create a set instance and a single tween to handle both the position and the scale stagger:

function cursorMover(e)
{
  gsap.set($cursor, { scale: 0.5 });
  gsap.to ($cursor, {
    x: e.clientX,
    y: e.clientY,
    duration: 0.3,
    stagger: 0.05,
    scale: 1,
  });
  gsap.to ($cursorHover, {
    x: e.clientX,
    y: e.clientY,
  });
}

Test both and see which one is the best for what you intend to do.

 

Happy Tweening!!!

Thanks a lot for your help! Your answer helped me to understand what I was doing wrong.