Squarespace 7.1 has some built-in animations, but for custom fade-in effects you need a small JavaScript snippet using Intersection Observer plus CSS transitions. Add both via Code Injection.
The script watches for sections entering the viewport and adds a class that triggers the CSS transition. This is performant and doesn't cause scroll jank like scroll event listeners.
<!-- Add to Code Injection > Footer -->
<style>
.page-section .content-wrapper {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.page-section .content-wrapper.is-visible {
opacity: 1;
transform: translateY(0);
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.page-section .content-wrapper').forEach(el => {
observer.observe(el);
});
});
</script>Generate scroll animations with our Animation GeneratorTry it free →
