How to recreate the "mouse move" animation on the https://gsap.com/resources/ page?

[billy nugz]

Hello, 
I really like the way the "flair-anim"  divs animate in and out on the resources page. I went poking around the DOM to see if I could locate the JS controlling it but couldn't find it. How would one go about recreating this effect?

 

I'm trying to get a fiddle going here (https://jsfiddle.net/Ldrgp1h7/) but I can't get the timing of this right.

Any response is welcome... My thanks in advance.

[billy nugz]

This is what I'm doing but stitching things up to the mouse move seems like it's a bit of a trick.  I'm thinking it might be better to use a timeline approach as the icons on the resources page (https://gsap.com/resources/) seem to follow the mouse for a sec, then die, can you trigger an animation after kill I wonder? Any help on achieving this effect is welcome. 😃
 

const tiles = document.querySelectorAll('.flair-anim');
const colourfultileHolder = document.getElementById('colourfultileHolder');
let currentTileIndex = 0; // To keep track of which tile to animate next
let lastAnimationTime = 0; // To track when the last animation was started

function animateTile(tile, startPosition) {
  const timeNow = Date.now();
  const timeElapsedSinceLastAnimation = timeNow - lastAnimationTime;
  const delay = Math.max(0, 400 - timeElapsedSinceLastAnimation); // Wait for at least 0.2 seconds since the last animation

  // Set a timeout to delay the animation if needed
  setTimeout(() => {
    // Calculate the relative positions for animation
    const startX = startPosition.x - tile.offsetWidth / 2;
    const startY = startPosition.y - tile.offsetHeight / 2;

    // Set the tile's starting position and properties
    gsap.set(tile, {
      x: startX,
      y: startY,
      scale: 0,
      opacity: 1,
      rotation: 0,
      scale: 0.5 // Starting from a smaller scale
    });

    // Animate the tile to the end position and fade out
    gsap.to(tile, {
      x: startX, // Move to the right
      y: startY, // Move to the bottom of the viewport
      rotation: -300,
      opacity: 0,
      scale: 1.5,
      duration: 1.5,
      ease: "power1.in",
      onComplete: () => {
        // Reset the tile's properties for the next animation
        gsap.set(tile, { scale: 0.5, opacity: 0, rotation: 0 });
      }
    });

    // Update the time for the last animation
    lastAnimationTime = Date.now();
  }, delay);
}

function recordMousePosition(e) {
  // Record the current mouse position
  const rect = colourfultileHolder.getBoundingClientRect();
  const mousePosition = {
    x: e.clientX - rect.left,
    y: e.clientY - rect.top
  };

  // Get the next tile to animate
  const tile = tiles[currentTileIndex % tiles.length];
  currentTileIndex++; // Move to the next tile for the next animation

  // Call the animate function with the current mouse position
  animateTile(tile, mousePosition);
}

// Add mousemove event listener
colourfultileHolder.addEventListener('mousemove', recordMousePosition);

 

[Cassie]

Heya! Glad you enjoyed it. That's a good attempt.

 

Here's the pen with the animation in -

See the Pen vYvBpmY by GreenSock (@GreenSock) on CodePen

 

Inspired by - https://tympanus.net/Development/ImageTrailEffects/ - tweaked to be more performant and to have a bit more ✨ GSAP Flair ✨

[billy nugz]

Ahhhhh a Ticker and Timeline... got it, thanks for sharing that!... FYI I haven't met a "Cassie" who wasn't an awesome human. Stay gold Cassie!

[Cassie]

I only know one other Cassie and she's a *very good* golden retreiver. So that tracks with my experience.