Element CSS properties are not resetting on page refresh until intersection observer function and element transitions are finished

I have a website where I am using a startup function to add a class to an element, and then wait 800ms and start my intersection observer function on two other elements. The problem I am running into is that when I refresh the page during the transition caused by the intersection observer function, the first element is not reset to its original properties and the first function is not executed. This problem does not occur if I am not using the intersection observer function.

I am using Google Chrome to test my project with a live server enabled.

// Get work items
const projects = document.getElementsByClassName('work-item');

// Convert each item to an object and attach observer to each item
function observeLoop() {
for ( i = 0; i < projects.length; i++) {
    projects[i].toObject;
    observer.observe(projects[i])
}
}

// Observer options
const options = {
    root: null,
    rootMargin: '0px',
    threshold: 0.05
}

// Intersection observer callback and options
let observer = new IntersectionObserver( (entries) =>{
    entries.forEach(item => {
        if (item.isIntersecting) {
           item.target.classList.add('show');
        }
      });
}, options);

// Startup function
function init() {
    const title = document.getElementsByClassName('landing-page')[0].classList.add('show-lander');
    setTimeout(observeLoop, 800);
}

// Call startup function
init();