2021 GSAP animate height and expand (safari issue)

[Zilli]

Hi, 

I've been using a Gsap Collapse codepen from a older topic on this forum; 

I was told to set up a new topic so here it is. I've been using the code from the following codepen: 

See the Pen aVYKEv by osublake (@osublake) on CodePen

It works partially. Probably it's a bit dated and I'm using the latest GSAP version to get it to work. It works great in chrome but I encountered a browser issue with safari though. For some reason when expanding the pane in Safari, the outerHeight differs from chrome. Here's the catch though; It works sometimes and sometimes it doesn't. At times the content overlaps the other elements + the footer on the page instead of pushing it down. I know that the outerHeight in safari is calculated different compared with chrome but it doesn't explain why it works sometimes. I hope that someone can give a possible solution for this. My own codepen is included.

 

*it looks like it's working properly in the codepen. 

Thanks so much.

See the Pen wvodVdj by fish-Stick (@fish-Stick) on CodePen

[Zilli]

Please open the codepen in fullscreen in safari in order to recreate the issue.

[GreenSock]

I don't have time right now to look at this, but I had a few questions for you:

1. If you know that outerHeight is calculated differently in Safari, why are you building something that relies on that? Why not just engineer things differently (more bulletproof) instead of trying to understand why it occasionally works in Safari? 
2. Do you think the issue has anything to do with GSAP? We really try to keep these forums focused on GSAP-specific issues
3. Can you please create a MINIMAL demo? The one you provided has over 1,000 lines of code to dig through (CSS, JS, and HTML). You will significantly increase your odds of getting a good answer here if you strip out absolutely everything but the absolutely essential pieces to recreate the problem

[Zilli]

Hi Jack,

 

thanks for replying. I’m actually not that familiar with gsap. I actually thought that the problem would occur in the type of layout I was using, hence the chunk of code in the html.  Since I was using a functionality that is from this forum.

 

to answer your questions,

1.) I discovered the outerHeight issue after I implemented it. Like I said; i’m not that familiar with gsap, found the lib, liked it. Used it for simple tweens, wanted to use something that collapses and expand with slick gsap tweens googled this, ended here and found this on the forum. I was hoping that it was a known issue maybe? 
 

2.) I’m not sure but I was hoping that the person who posted the codepen on the GSAP forum maybe could respond? Since it’s a dated post your colleague suggested that I made a new post. Thats why i’ve posted the post referral and codepen that was used in that particular post, in this post. 

 

3.) sorry, posted it last night in kind of a hurry before I went to bed, because your colleague asked for it and did not know that a minimal Demo was a thing which had guidelines. I only stripped the html and not the css and JS. I’ll strip it asap. Thanks.

[Zilli]

So while I was deconstructing the codepen I did another test whether it was still functioning. I kept the CS  and HTML as is for now since I took out the navigation that used a chunk of the JS. 
Turned out it works when just using the necessary JS for this particular function. Seems like there is a conflict happening with the rest of the JS I think. So, to me it doesn't look like a GSAP specific issue. Thank you for letting me take a deeper look. 

See the Pen xxRrVqL by fish-Stick (@fish-Stick) on CodePen

I do hope that I could get some advice on how I could approach this? I'm not that experienced on OOP. If not, I'll try something else. 

Thank you for your time.  

[GreenSock]

7 hours ago, Zilli said:

I do hope that I could get some advice on how I could approach this? I'm not that experienced on OOP. If not, I'll try something else. 

Would you mind being more specific? What were you hoping we could help with? Is there something GSAP-related? 

 

If I understood your earlier comment correctly, you were saying that you figured out that the issue wasn't related to GSAP, right? 

 

We'll gladly look at a minimal demo and answer anything GSAP-specific. 👍

[Zilli]

Sorry for the late reply. I went for another more solid approach as was recommended.

Thank you.