Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ikesaunders

Optimal TextPlugin usage for a beginner creating a hover map.

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

  • Like 5

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×