20-20REENVISIONED / Refactored-fortune-teller

Fortune telling app for CSE 112 Spring 2024
https://20-20reenvisioned.github.io/Refactored-fortune-teller/
0 stars 0 forks source link

Bug causing missing card Containers #26

Closed JosephBurger closed 3 months ago

JosephBurger commented 3 months ago

Henry encountered an issue on the home page where card containers were not displayed correctly when navigating back to the page using the browser's back button. This issue was due to the state of animations and styles not being reset properly, causing the card containers to remain invisible or improperly styled due to persistent animation properties.

JosephBurger commented 3 months ago

The issue was resolved by adding event handling for the pageshow event, which detects if the page is loaded from the browser's cache. Here's a brief rundown of the solution implemented:

Reset Animations: We added a listener for the pageshow event. If the page is loaded from the cache (event.persisted is true), we reset the animations and styles for all card containers using GSAP. This ensures that all card containers are visible and styled correctly, regardless of how the user navigates back to the home page.

Code Enhancement: We improved the animation logic to ensure any previous animations are killed before new ones begin. This prevents overlapping animations that could leave elements in an unintended state.