Unable to get .play to function on second animation

[PropKitty]

Hello! I'm still relatively new to animation and GSAP, so I'm trying hard to learn the best ways of going about this.

 

 

You can see on my codepen I'm trying to make it so that if you edit a section, it's going to make the other sections uneditable and what I want it to do is make the edit and remove buttons animate to hide them (not written yet) and the save animate into existence (along with a cancel button not yet existing). However, while everything else basically works, this is where I'm hitting my roadblock.

 

I have this.clickToEdit.play(); working just fine, but no matter what I put (saveMenu.clicktoSave.play(); or this.clickToSave.play(); and make the script above look for the right element instead of just $(this)) it keeps telling me that it's undefined.

 

How do you get an animation to just... activate on click/hover/etc?

 

Secondary question: is there a more condensed way to be writing my animations? Mostly trying to get things to work and playing around with things but I'd like to learn to write as DRY as possible.

 

Thank you all so much - everyone's been super kind on these forums!

See the Pen PPBzvW by hitokage (@hitokage) on CodePen

[Carl]

Thanks for the demo, but in the future please add some comments to your code that will help us focus on where to look. It also helps to have some basic instructions on how we should interact with the demo like:

 

Rollover a section, press the "edit" button. There is a hidden "save" button that should appear.

 

to get the save button to appear try this

 

$(".editSection").click(function () {

        var editMenu = $(this).closest(".editMenu");

        // this next line finds the first DOM element

        var saveMenu = $(this).closest(".section").find(".saveSection")[0];

        saveMenu.clickToSave.play();

        $(".section").unbind('mouseenter mouseleave');

    });

 

The problem is that jQuery's find() creates a jQuery object that may contain multiple elements. You need to target the first DOM element in that set of results. 

 

http://codepen.io/GreenSock/pen/yYqVLB?editors=001

[PropKitty]

Thank you! I didn't realize it was something that simple... I feel pretty foolish! Now if I could fix the 100 other wrong things with these animations, I'll be set!