Items disappear on window resize

[jhob101]

This is my first go with GSAP so probably making some basic error here.

 

There's a calculation based on content height to determine positioning of the overlay so that only the heading is shown in the default state.

 

a) I'm not convinced I'm doing the overlay positioning in the best way so if there's an easier and more reliable way to achieve this, please let me know!

b) When the window is resized the items become invisible.  I tried to call the init() function to re-initialise it but this doesn't seem to work for a reason I can't work out.

 

Any ideas what's up?

 

Thanks in advance for any help!

See the Pen rNYJegp by jhob101 (@jhob101) on CodePen

[OSUblake]

Welcome to the forums @jhob101

 

Due to the way you have things set up, calling init on resize is not a good idea.

 

The hidden part is happening because you are doing a from animation, which is only going to animate from the specified value to the current value. Check out the demo in the Create from() logic issues here. That's essentially what's happening every time you call init.

 

 

Another probably with calling init is that you are not removing your event listeners, and then you are adding more event listeners. Besides creating conflicts, that will also introduce a memory leak.

 

When I need to update something created inside a function, like with the forEach, I like to create an object with methods on it that I can access outside of the function. 

 

So what I'm doing here is creating an array of item objects that have an init method on them. So to re-initialize them, I just need to item.init().

 

See the Pen yLPvvJY by GreenSock (@GreenSock) on CodePen

 

[jhob101]

@OSUblake thank you SO much for that detailed response.  I've been through your suggested code and have now implemented a version of it.  

 

It was really helpful that you explained the purpose of why it was structured like that.

 

I'm off to have a read through the 'Common mistakes' now.

 

thanks again!