Hide animated overlay on browser back

[Its_Lefty]

Hi there!

This is my code for opening a fullscreen overlay with GSAP:

 

var tlHeader = gsap.timeline({
    paused: true,
    reversed: true
});

tlHeader.set('.header-post-wrapper, .menu-item a', {
    y: 50,
    opacity: 0,
});

tlHeader.to('.fusion-flyout-menu-bg', {
    duration: .3,
    backgroundColor: 'rgba(0,38,85,0.96)',
    y: 0,
    autoAlpha: 1,
    ease: 'power4'
}); 

tlHeader.to('.fusion-flyout-menu', {
    duration: .3,
    y: 0,
    autoAlpha: 1,
    ease: 'power4'
}); 

tlHeader.to('.header-post-wrapper, .menu-item a', {
    duration: .5,
    y: 0,
    opacity: 1,
    ease: 'power4',
    stagger: 0.1,
}, '-=.5');

var btnToggle = document.getElementById('burger-toggle');
btnToggle.addEventListener('click', () => {
    tlHeader.reversed() ? tlHeader.play():tlHeader.reverse();
})

Everything is working fine except this: If you open the overlay and click on a link in order to change the page and afterwads navigating back to the page using the browser back functionality, the overlay is still opened which is obviously not desired. How can I fix this? I'm not sure if this is really GSAP-related. Thanks in advance! 🙂

[Rodrigo]

Hi,

 

Sorry for the delay in answering.

 

Unfortunately I've never seen anything like that so I couldn't tell you about it. Please provide a minimal demo that replicates the issue you're having so we can take a better look at it.

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Happy Tweening!