Jump to content


Collapsing Side Panels + Expanding Middle

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

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?



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

Link to comment
Share on other sites

The reason it is not working in codepen is because you are missing like 10 other scripts to make your project work:


On codepen you just have TweenMax and jQuery loaded.


But on your private server you have all these other scripts loaded:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/jqxcore.js"></script>
<script src="js/jqxtree_MINI.js"></script>
<script src="js/jqxdata.js"></script>
<script src="js/jqxdragdrop.js"></script>
<script src="js/jqxbuttons.js"></script>
<script src="js/jqxscrollbar.js"></script>
<script src="js/jqxpanel.js"></script>
<script src="js/jqxcheckbox.js"></script>
<script src="js/jqxdropdownbutton.js"></script>
<script src="js/tree_scripts.js"></script>

<script src="js/sureStart_scripts.js"></script><!-- /scripts -->

You would need to add those scripts on codepen for your thing to work ;)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

I also noticed you have a expandCollapse() function in your code. But nowhere in your codepen code, is that function called to run!

Link to comment
Share on other sites

@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);
Link to comment
Share on other sites

Chrome throws a console error :

Uncaught TypeError: Cannot read property 'length' of null

Firefox throws this error:

SecurityError: The operation is insecure.

I would suggest you try and break it down even further into smaller code snippets just one or two panels, with just the expand collapse code. Since i presume your question is in regards to the GSAP animation of opening and closing the panels.


I even brought your codepen using codepen's debug mode which runs your code without an iframe in codepen.




But still i get the same errors in both Firefox and Chrome on Windows 7 (64-bit) in the browser console.


Once its working in codpen we can concentrate on your GSAP tween and timeline code.

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

I'm not sure what it is? Codepen is known to be buggy, You can try removing the comments maybe they are parsing wrong? Or something else?


I know GSAP TweenMax is working, because i just added a simple tween to the end of your code inside the jQuery DOM ready, and it scales down the #designer div.


See the Pen rORYao by jonathan (@jonathan) on CodePen


I even took out all your comments in the HTML, CSS, and JS panels and TimelineMax code i added at the bottom still works


See the Pen ojVGKN by jonathan (@jonathan) on CodePen


Sometimes codepen can be a real poopy pants, that is why i suggested to make your example as simple as possible. Or just take away code a little bit at a time until stuff works.


So it has to be something else codepen doesn't like in your code?

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

I tried looking at this too. Even if the CodePen was working, I'm doubtful this is the type of thing we would have the resources to sink the time into. 

From looking at the 80 lines of code I didn't even know where to begin. This doesn't mean your code is bad, its just overwhelming for the first-time viewer.

Our support if much more focused on the GSAP API than debugging projects. 


Since you know the code I would suggest the following debugging techniques


  • use a console.log() inside every conditional block to make sure the right code is running when you expect it to
  • when you find the tween that "isn't working" use console.log() to report the target of the tween and verify any variables you pass into that tween.
  • add an onUpdate or onStart callback to any tween that you suspect is not running so that you can try to figure out if a tween isn't running or maybe there just aren't any visible changes for instance if you tween left to 0, but left is already 0 there will be nothing to see while that tween runs.


I really wish we could be of more help, but again this is a little beyond what we typically do.

  • Like 1
Link to comment
Share on other sites

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!

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.