Assign a Tween to Current Target inside a Function.

[emilychews 19 Likes (Newbie)]

Hi,

 

I have a menu trigger button that appears on a page in more than one place, so i've used classes as the selectors.  I've worked out how to loop through the classes and toggle different functions to be called using an if else statement, but I can't seem to get this to work with tween max tweens.  I've commented out a  tween in the code below, which does the same as the vanilla javascript  that is inside the same function, but i can't get it to work.

How do i get a tween to be called as a current target?

Any help would be awesome. 

Emily

 

As well as the codepen above, here is the JS code for quick reference.
 

var clicked = false;  // sets the clicked state

var $mainMenuButton = document.getElementsByClassName('desktopmenubutton');  // button to be clicked

function newColor(e) {
  e.currentTarget.style.background = "black";
}

function originalColor(e) {
  e.currentTarget.style.background = "red";
  // e.currentTarget.TweenMax.to($mainMenuButton, 1, {background: 'red'});
}

// loop through instances of the class and add functions dependent on the click state

for (h = 0; h < $mainMenuButton.length; h +=1) {
  $mainMenuButton[h].addEventListener('click', function(e) {
    if (clicked === false) {
      newColor(e);
      clicked = true;  // changed the clicked state
    } else {
      originalColor(e);
      clicked = false; 
    }
  });
}

 

See the Pen GEEpqW by emilychews (@emilychews) on CodePen

[GreenSock 12,412 Likes (Superhero)]

I think this is what you were looking for, right?: 

See the Pen 093ddb5adcf593987ab357a2fe53c2cb by GreenSock (@GreenSock) on CodePen

 

It's just a matter of feeding that value in as the target. Does that help?

[emilychews 19 Likes (Newbie)]

Ah - got it.  Thank's Jack.