Jump to content
Search Community
phillip_vale test
Moderator Tag

Go to solution Solved by Carl,

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

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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
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
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...