Images Fade-in

The following bit of code allows all images on the website to fade in gradually.

HTML:

JAVASCRIPT:

document.addEventListener('DOMContentLoaded', function() {
const images = document.querySelectorAll('img');
images.forEach(function(image) {
const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('loaded');
observer.unobserve(entry.target);
	}
});
}, { root: null, rootMargin: '0px', threshold: 0.2 });
observer.observe(image);
	});
});

CSS:

body:not(.sqs-edit-mode-active) img {
opacity: 0;
transition: opacity 2s ease-in-out !important;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
body:not(.sqs-edit-mode-active) img.loaded {
opacity: 1;
}

Notice that the “body:not(.sqs-edit-mode-active)” tag before the img selector allows the CSS to not be applied in the edit mode of squarespace, allowing you to work on your website in peace, without constantly going back and forth to the CSS to change the opacity value. Otherwise as you enter edit mode, all images become transparent.