Jump to content
Search Community

Assign a Tween to Current Target inside a Function.

emilychews test
Moderator Tag

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,

 

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 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...