Optimal TextPlugin usage for a beginner creating a hover map.

[ikesaunders 0 Likes (Newbie)]

Hello everyone,

 

I've just started learning GSAP and jQuery today with the help of ihatetomatoes and this excellent forum. 

 

I'm trying to make a hover-able floor plan map that displays information on the currently-hovered room.

 

So far in my proof-of-concept, I have implemented this using TweenMax's hover and TextPlugin. I just have a question about implementing the rest of the map.

 

Instead of individually making a separate function for each block, is there a more elegant way to implement an array so that when you hover over a shape, it changes hoverText to an assigned message?

 

I also plan to have buttons to switch between floors of the building, but I'm assuming that won't affect how the array should be constructed.

 

Thank you very much for the help, and apologies if there's unnecessary fluff in my codepen.

See the Pen qbvXrL by ikesaunders (@ikesaunders) on CodePen

[ZachSaucier 467 Likes (Leader)]

Hey ikesaunders, welcome to the GSAP world!

 

This isn't really a GSAP question, but in short yes you can. One way to do it would be to use a data attribute and call that inside of your box class' hover function:

TweenLite.to(hoverText, 0, {
  text: $(this).data("text"),
  ease: Linear.easeNone
});

See the Pen GoedYZ?editors=0011 by Zeaklous (@Zeaklous) on CodePen

 

The key here is to use the this keyword which, since it's inside of the box hover function, refers to the box being hovered