Streaming live at 10am (PST)

Preloader custom code breaks "Scroll based animations & interactions"

Edit: Problem solved & preview links removed.

Hi,

I’d really appreciate if someone could assist me in the following. After implementing this script from Finsweet to run a loader animation once per session, all of the scroll based animations stop responding to user scrolling.


Here’s the breakdown of the code.


<style data-info='hacks-head'>
/*The page-wrapper is initially hidden*/
.folio-wrapper {
  display:none;
}
</style>
<script data-info='hacks-head'>
document.addEventListener("DOMContentLoaded", function(event) { 
	// get a reference to the page wrapper
	const pageWrapper = document.querySelector(".folio-wrapper");
	// get a reference to the loading wrapper
	const loadingWrapper = document.querySelector('.folio-loader');
	// get the 'seenAnimation' item from session storage and store in a seenAnimation variable
  const seenAnimation = sessionStorage.getItem('seenAnimation');
  // if the 'seenAnimation' item is undefined
	if(!seenAnimation){
    // display the loading-wrapper 
    loadingWrapper.style.display = "flex";
    // show the page-wrapper 
    // after a set duration of 3000 milliseconds
    // (the time it takes to show the loading-wrapper in this case)
    setTimeout(()=>{
      loadingWrapper.style.visibility = "hidden";
			pageWrapper.style.display = "block";
		}, 3000);
    // set the 'seenAnimation' item to the session storage 
    sessionStorage.setItem('seenAnimation', 1);
	}
  else{
  	// else if the 'seenAnimation' item exists
    // the user has already seen the animation
    // and so
    // hide the loading-wrapper
    loadingWrapper.style.visibility = "hidden";
    // show the page-wrapper 
    pageWrapper.style.display = "block";
  }
});
</script> 

Here’s what I’m trying to achieve eventually.

  1. Is there a possibility to activate these interactions normally on scroll while maintaining the script?

  2. I’ve noticed when I refresh the browser, some elements rerun once again regardless of the implemented code.

I suspect that’s because of my structure in Webflow. These elements are not in the loader div that is supposed to be hidden on refresh, that’s why the loader script ignores them and run once again on page refresh.

I’d appreciate if someone could guide me into solving these bugs. Thanks in advance!

I am pretty sure Finsweet provides support for their tools. You should try reaching out to them.