about animations in specific breakpoints only and resetting inline styles around them

[emjay]

Hello GSAP friends,

in my pen you can see a navigation that opens from the right side on mobile and should be displayed normally on desktop. The animation for mobile works as expected, but I have problems to make the navigation visible on desktop because of the inline styles set by gsap.
If you expand the navigation and drag the viewport larger the navigation remains visible because the inline styles are correct in this case. But in the default state the navigation is not visible because of inline styles like opacity = 0.

Do you have a tip for me, how I should either remove the inline styles or leave the animation active only in a breakpoint?

In the attached gif you can see how the nav should look like on desktop and mobile.  (gsap was commented out for this gif).

Thanks in advance for your help.

See the Pen 32720be00ceed8c048fa9120bc5d1167 by emjay (@emjay) on CodePen

[ZachSaucier]

Hey emjay. Usually in these sorts of situations I set the state of the animation to what it needs to be inside of the media query event listener. In this case put the following inside of the bp.matches === true section:

menuAnimation.reverse().progress(0);

 

[emjay]

Hello @ZachSaucier,

 

thanks for your message, but that didn't help, when I have a desktop viewport and load the page or the pen, the navigation is hidden with inline styles (opacity: 0). But in this case I want it to be visible.

 

See the Pen 642c1a8a34ad7790ac80272c6c281d1f by emjay (@emjay) on CodePen

[tailbreezy]

var menuAnimation = gsap.timeline({
    paused:true,
    reversed:true,
    ease: "power3.inOut",
    defaults: {
    immediateRender: false
    }
});

 

The .from is setting autoAlpha before the animation has started. Usually a very good thing.

You can override this by setting immediateRender: false.