Nav not returning to original height on window resize

[ZeeEssDoubleU]

This is a very simple example coming from a much more complex set of animations.

 

What I want seems simple, but I can't figure it out.  I'm trying to get the nav-section to return to its original height/position after the steps below are carried out.  If you follow the steps below, you'll notice the nav-section returns to a collapsed position instead of its full-height position.  This is the position delegated by styled-components, not the Timeline.

 

I'm not trying to change my styled-components or add more tweens to the Timeline.  Is there a method that clears Timeline attributes/data or one that allows CSS/styled-components to take priority over the Timeline?  Things like kill(), clear(), remove(), etc. don't seem to work in the way that I want.  Maybe I'm just using them in the wrong way.  Please advise.  Thanks.

 

Steps to recreate:

1. Resize window (below specified px) to get nav section to stick to top
2. Click 'Expand Nav' button to expand nav-section (full window height)
3. Click 'Collapse Nav' button to collapse nav-section 
4. Resize window (above specified px) to get nav section to stick back to left
5. Notice that nav-section does not go back to original starting height specified by styled-components above {height: 100vh; width: auto}

See the Pen PoooNbZ by ZeeEssDoubleU (@ZeeEssDoubleU) on CodePen

[OSUblake]

Your element has an inline style for height. You need to get rid of that. Maybe do it inside an media query listener.

 

 

 

[ZachSaucier]

Hello,

 

Have you tried using clearProps: true? Overall your logic seems a bit finicky - certain combinations of resizing and opening and closing cause some wonky behavior. 

[ZeeEssDoubleU]

@OSUblake, the styles are in styled-components (css-in-js) above the component.  There's a base style and a media queried style.  That's what I'm addressing with the question. 

 

Is there a way to prevent my timeline from overriding the css/media queries or to temporarily clear the timeline so the original css kicks back in?  It's not a styled-components issue, the same issue pops up if I'm using plain css/sass/etc.

[ZeeEssDoubleU]

@ZachSaucier, I did and it didn't work like I thought.  Maybe I was using it incorrectly?  Is it supposed to clear timeline props allowing an element to snap back to its original css instantly?

[OSUblake]

Again, the problem is the inline style. Clear it inside the appropriate media query listener. I'm on mobile and can't make a demo for you.

[ZachSaucier]

6 minutes ago, ZeeEssDoubleU said:

Is it supposed to clear timeline props allowing an element to snap back to its original css instantly?

It clears all inline styles, so if you have the styles inline to begin with it will clear them also.

 

You should avoid inlining styles if you don't want them to be affected by GSAP  

[OSUblake]

37 minutes ago, ZeeEssDoubleU said:

the styles are in styled-components (css-in-js) above the component.  There's a base style and a media queried style.  That's what I'm addressing with the question. 

 

It sounds like you don't understand how inline styles work. GSAP uses inline styling to override CSS. It's a property of an element.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information#DOM_Style_Object

 

Now look at how you can change stuff according to a media query watcher.

 

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

 

 

You can remove the inline height style from your nav inside a watcher like so.

myElement.style.height = ""

// OR
TweenMax.set(myElement, {
  clearProps: "height"
});

 

But that's according to how your demo is set up.

 

I wouldn't set it up like that to begin with. There is no point in creating a timeline if it's never going to be used. 

 

 

[OSUblake]

React Hooks sure does complicate some really simple stuff. I got it working like this.

 

See the Pen 4e611496c9068a5271cdccb01dc5996a by osublake (@osublake) on CodePen

 

 

[ZeeEssDoubleU]

@OSUblake,  thanks for taking the time to respond and solve the problem.  It's quite a complicated solution for a seemingly simple thing.  The media query watcher is an interesting solution.  I'll be sure to use it in the future.  Thanks again.

 

Also my mistake on misunderstanding you about inline styles.  I didn't make the connection that you were talking about my inlining of styles through the timeline.