Multiple Icons

[phillip_vale 1 Likes (Newbie)]

Hi there,

 

I am trying to build a project for work that is essentially a map based infographic.

 

This is my first major project using Greensock so i am trying to do things step by step.

 

First step. The icons that will display on the map. I have made these red in my example and was want each to open a box next to them. I was wondering the best way to do this?

 

Of course at the moment when i click one they both open.

 

Is the class best used to style in the css (e.g. .icon) and the id for Greensocks use?

 

Any help is appreciated,

 

Phil

See the Pen dXPWQx by phillip_vale (@phillip_vale) on CodePen

[Carl 9,066 Likes (Superhero)]

Thanks for the demo.

 

There are probably a dozen different ways to do this with unique pros and cons depending on the scope of your project.

A relatively simple way, without messing with the html markup, relies on a little jQuery'

//for every place create 1 timeline that reveals the box for that place
$(".place").each(function(index, element){
  var myBox = $(this).find(".box")
  var tl = new TimelineLite();
  tl.from(myBox, 0.5, {height:0})
  tl.reversed(true);  
  // create an animation property on the .place that references the timeline
  this.animation = tl  
})


//when you click something find out its place and reverse its timeline
function menuFunction() {
 var myPlace = $(event.target).parents(".place")[0]; 
 myPlace.animation.reversed(!myPlace.animation.reversed());
};

http://codepen.io/GreenSock/pen/PzwQmw?editors=0010

 

this method wouldn't require any DOM traversal on clicks

 

//for every place create 1 timeline that reveals the box for that place
$(".place").each(function(index, element){
  var myBox = $(this).find(".box");
  var myBoxLink = $(this).find(".close")[0];
  var myIconLink = $(this).find(".icon")[0];
  var tl = new TimelineLite();
  tl.from(myBox, 0.5, {height:0})
  tl.reversed(true);  
  // create an animation property on icon and link
  myIconLink.animation = tl;
  myBoxLink.animation = tl;
})


//when you click something find out its place and reverse its timeline
function menuFunction() {
  event.target.animation.reversed(!event.target.animation.reversed())
};

http://codepen.io/GreenSock/pen/BzyYZo?editors=1010

 

Again, there are probably a bunch of other ways. Unfortunately we have to keep our support pretty focused on the GSAP API and not so much on project setup and other JS techniques. 

 

 

 

Oh, I noticed you were using the same ID in multiple places for #icon and #box. That's a big no-no. You should create classes for those.

[phillip_vale 1 Likes (Newbie)]

Hi Carl,

 

Thanks so much for you help on this.

 

The client has now changed the brief where the buttons need to hover and show their name.

 

I tried updating the codepen but i think i am missing something.

 

I thought the reverse would handle the MouseOff but they seem to stay on.

 

Again thanks so much for your help so far.

 

Cheers,

 

Phil

[Carl 9,066 Likes (Superhero)]

you would need a mouseleave event too:

http://codepen.io/GreenSock/pen/bedgKa?editors=1010

onMouseLeave="menuFunction()"

[phillip_vale 1 Likes (Newbie)]

This is great thanks so much.

 

Last question, when i use it in the index.html file the <script> works perfectly. When i implement it in the .js file i have attached it stops working.

 

Any ideas what the error could be here?

 

Thanks again,

 

Phil

[phillip_vale 1 Likes (Newbie)]

Sorry i think i fixed it.

 

My script.js was loading before my jquery. 

 

Thanks again!