PropKitty

Carl, thank you kindly for the information. I'm determined not to let this get the better of me even if I'm a bit new to it all, so I'll use this and hopefully get lucky. If it ever ends up working, I'll post what worked!

So basically I'm sunk trying to fix a codepen problem ; _ ; I guess I'll just go back to fighting my original problem, then. I can't do much of anything about codepen not working when it works just fine outside of codepen. Thank you for trying, though! You always respond so quickly!

I don't understand. You can see that the code itself, without being pasted into codepen, works just fine in normal HTML land. I get no errors. I can't break down the code and still have what I need to fix be seen. I don't know how to fix it in codepen when it works just fine outside of codepen.

@Jonathan - I don't understand what you mean. Right at the bottom expandCollapse is called to run with the on click. $(".expander").on('click', function () { previousExpander = $(this).prev(); nextExpander = $(this).next(); if (nextExpander.hasClass("expansion")) { var elementWidth = getPerWidth(nextExpander); expandCollapse(nextExpander, this, elementWidth); } else if (previousExpander.hasClass("expansion")) { var elementWidth = getPerWidth(previousExpander); expandCollapse(previousExpander, this, elementWidth); } });

@Jonathan - none of these other scripts matter. I removed them and the code still worked. I just uploaded the files as I had them to my private server. This is purely jquery and GSAP, not jqwidgets.

Hello! I am trying to work out something where there's two side panels that can be collapsed to make the middle panel bigger. I have it 75% of the way there -- the only thing that doesn't work is that if you try to collapse both side panels, the middle doesn't go to it's full size (just stays at it's 3/4ths size as if only one panel is closed). I've done everything I could to get the codepen to work but even though it has everything in it that works outside of codepen, it won't actually animate and I can't figure out why, so I uploaded everything to my private server to show that it does work. http://tinyurl.com/q4smgxp Forgive if it isn't the most elegant code - I'm still learning jquery and GSAP! Anyone have thoughts on how to make it actually open up fully when both side panels are collapsed? Thanks!

Ah, gotcha. I hope what's needed to help out with my question is in the fork, then! I'm still totally confused on how to make this timeline when you need to pass 'this' work.

That is really great to know, but I'm not certain I understand how that's going to help? http://codepen.io/hitokage/pen/PPBxGY I removed fairly much everything, but now nothing happens or works. Maybe I'm not explaining myself well enough. ._.

Jonathan, I apologize if I'm not quite understanding. My code is all pretty interdependent on each other... I'd like to convert *all* of the Tweenlite.to into timelines so each object had it's own little timeline I could pull animations from. Trying to pull out just a bit is making everything break pretty badly until the point it doesn't even remotely function in the codepen, so I'm not sure what I should pull out? $(".saveSection").each(function (index, element) { var tlClickToSaveAnimation = new TimelineLite(); var saveSection = $(this).closest(".section").find(".saveSection")[0]; tlClickToSaveAnimation.to(saveSection, 0.5, { opacity: 1, display: 'block', scale: 1, paused: true }, "ClickToSaveAnimation"); }); /*$(".saveSection").each(function (index, element) { var clickToSaveAnimation = TweenLite.to($(this), 0.5, { opacity: 1, display: 'block', scale: 1, paused: true }); element.clickToSave = clickToSaveAnimation; var clickToSaveAnimationReverse = TweenLite.to($(this), 0.5, { opacity: 0, display: 'none', scale: 0.7, delay: .2, paused: true }); element.clickToSaveReverse = clickToSaveAnimationReverse; });*/ This bit here (unless that's what I should be pulling out?) is the original Tweenlite.tos that worked, but I had to make a Reverse and it was awkward since the reverse needed a delay and I thought the whole thing could be better done using Timeline labels. I did in fact watch that video, which got me even as far as I am now, but it doesn't answer my question unfortunately. Given that I need to call the .play inside of something else (I am clicking on edit and the animation happens on another object, the save button) I don't know how to pass the animation 'this' properly so it knows to only play that animation on the save button in the section the edit button I just clicked on is. All of the stuff in this video is based on calling something labeled once in a document and you click on THAT thing and the animation happens to it, not something else.

Hello! After getting some help and finally understanding how TweenLite.to works and getting some pretty good animation out of it, I was super excited because I wanted to change some of it over to a timeline so I could have delays where I needed them, plus start to figure out how the whole timeline thing works. Basic premise: you hover over a section, edit it, and the save and cancel buttons appear. (Then when you hit save or cancel, everything happens in reverse). I tried to start easy by just trying to make the appearing save button be a time line. You'll see in my codepen that I have tlClickToSaveAnimation.play(); where I want the animation to fire off. $(".saveSection").each(function (index, element) { var tlClickToSaveAnimation = new TimelineLite(); var saveSection = $(this).closest(".section").find(".saveSection")[0]; tlClickToSaveAnimation.to(saveSection, 0.5, { opacity: 1, display: 'block', scale: 1, paused: true }, "ClickToSaveAnimation"); }); And here is my attempted timeline build. As it currently stands, I'm getting "tlClickToSaveAnimation is not defined". Originally I had it outside of the function for each saveSection, but then 'this' wouldn't be defined and the animation couldn't work. Am I missing something completely in how animations work? My goal is to get everything into it's own timeline so I can juyst whatever.play("label") so I can call animations how I need, including the delays on the reverses so things disappear in the order I want. Again, thank you all for your help! Everyone's been super helpful in getting this newbie to understand GSAP.

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!

Hello! I'm still relatively new to animation and GSAP, so I'm trying hard to learn the best ways of going about this. http://codepen.io/hitokage/pen/PPBzvW 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!

@Diaco: Thank you so much!! I'll remember to make a Codepen for the future!! This a whole new area of coding for me, so I'm really excited to be trying it out. Your code worked beautifully! Now I can understand how it works a little better thanks to your code.

Hello! I am new to GSAP but though I read the beginning documentation and watched the getting started video, my first attempt at learning GSAP is not going well. I'm not certain how to even begin with it, but going to be giving it a shot! My HTML: <div class="section"> <h3>Section 1</h3> <p>There's some text and what not in this section.</p> <div class="editMenu"> <ul class="editList"> <li><a href="#">Edit</a></li> <li><a href="#">Remove</a></li> </ul> </div><!-- /editMenu --> </div><!-- /section --> My script: $(document).ready(function () { //hover over Section, make editMenu opacity = 1, scale = 1 //on mouseOut, make editMenu opacity = 1, scale = .7 $(".section").hover(function () { var editMenu = $(this).find(".editmenu"); TweenMax.to(editMenu, 0.2, { css: { opacity: 1 } }); }, function(){ var editMenu = $(this).find(".editmenu"); TweenMax.to(editMenu, 0.2, { css: { opacity: 0 } }); } ); }); The CSS I am somehow assuming is screwing things up: .editMenu{ position: absolute; top: 10px; right: 5px; opacity: 0; transform: scale(.7); } I'm assuming I'm missing something simple! Thank you for any help.