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.

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

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: Resize window (below specified px) to get nav section to stick to top Click 'Expand Nav' button to expand nav-section (full window height) Click 'Collapse Nav' button to collapse nav-section Resize window (above specified px) to get nav section to stick back to left Notice that nav-section does not go back to original starting height specified by styled-components above {height: 100vh; width: auto}

Thanks for pointing out the typo. Ill get that fixed. I’ll use useRef() going forward and move the timeline initialization out of the useRef() call. It definitely sounds like the better option. As for the component re-rendering every click. NavHamburger actually has ‘menuExpanded’ state that is toggled on and off with each click. I included it for demonstration in this CodePen, because I'm currently using NavHamburger in an app where its parent’s (a nav bar) ‘menuExpanded’ state is passed to it through props. So unfortunately, the NavHamburger will re-render due to the 'menuExpanded' state change.

Gotcha and yes, that is much simpler. Thank you for your help!

Alright. I got it to work. I was able to do it initializing the timeline with useRef() and useState(). You can see my CodePens below. Is there a preference with useRef() vs useState()? Another question, maybe it's just a bug in CodePen... In both examples, if you click the icon enough times, the middle layer will disappear and not come back for that click cycle, but will come back on subsequent clicks. It seems to be totally random, as there is no number of clicks that consistently triggers it. What I do notice though, is that it happens more often the longer you keep clicking (like 50+ times). Any thoughts? Hamburger - initialize w/ useRef() CodePen - Hamburger - initialize w/ useRef() Hamburger - initialize w/ useState() Codepen - Hamburger - initialize w/ useState()

Hi. I have the following component in React, a hamburger icon, which works just fine as written. My issue is I'm trying to make the component more concise by using the reverse() method on my timeline, which I can't get to work as intended. I've read through a few posts to try and remedy the issue, but it's not coming to me. const NavHamburger = props => { const tl = new TimelineMax() // use useRef to detect first render const isFirstRender = useRef(true) useEffect(() => { // prevent hamburger from animating on first render if (isFirstRender.current === true) { isFirstRender.current = false } else { props.menuExpanded === true ? tl .to([".top", ".bottom"], 0.2, { y: "0%" }, 0) .to(".middle", 0, { autoAlpha: 0 }, 0.2) .to(".top", 0.2, { transform: "rotate(45deg)" }, 0.2) .to(".bottom", 0.2, { transform: "rotate(-45deg)" }, 0.2) : tl .to([".top", ".bottom"], 0.2, { transform: "rotate(0)" }, 0) .to(".bottom", 0.2, { transform: "rotate(0)" }, 0) .to(".middle", 0, { autoAlpha: 1 }, 0.2) .to(".top", 0.2, { y: "-400%" }, 0.2) .to(".bottom", 0.2, { y: "400%" }, 0.2) } }, [props.menuExpanded]) return ( <Container className="nav-hamburger" onClick={() => props.setMenuExpanded(!props.menuExpanded)} > <Inner> {/* bars of hamburger */} <Top className={"top" + props.menuState}></Top> <Middle className={"middle" + props.menuState}></Middle> <Bottom className={"bottom" + props.menuState}></Bottom> </Inner> </Container> ) } export default NavHamburger I'm specifically trying to replace the following section of code with tl.reverse(). Any direction would be greatly appreciated. I have a feeling that it has to to with how I'm declaring my timeline, but can't figure out the correct way to go about it. Thanks. tl .to([".top", ".bottom"], 0.2, { transform: "rotate(0)" }, 0) .to(".bottom", 0.2, { transform: "rotate(0)" }, 0) .to(".middle", 0, { autoAlpha: 1 }, 0.2) .to(".top", 0.2, { y: "-400%" }, 0.2) .to(".bottom", 0.2, { y: "400%" }, 0.2)