Jump to content


Unable to get .play to function on second animation

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

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

Link to comment
Share on other sites

  • Solution

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];
        $(".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. 



  • Like 4
Link to comment
Share on other sites

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!

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.