Jump to content
GreenSock

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

Assign a Tween to Current Target inside a Function.

Recommended Posts

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

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

  • Recently Browsing   0 members

    No registered users viewing this page.

×