Squarespace includes built-in animation options for sections and blocks, but they are limited to a few preset styles. If you want custom scroll-triggered animations, unique hover effects, or entrance transitions that match your brand, you need to go beyond the defaults.
This guide covers three types of custom animations: CSS-only hover effects, scroll-triggered entrance animations, and keyframe animations. Each uses Code Injection or Custom CSS with no external libraries required.
1. CSS Hover Effects
Hover effects are the easiest animations to add and they make the biggest immediate impact. Add these through Design → Custom CSS:
/* Image zoom on hover */
.sqs-image-shape-container-element {
overflow: hidden;
}
.sqs-image-shape-container-element img {
transition: transform 0.4s ease;
}
.sqs-image-shape-container-element:hover img {
transform: scale(1.08);
}
/* Card lift with shadow */
.sqs-block {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sqs-block:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}
/* Button glow on hover */
.sqs-button-element--primary {
transition: box-shadow 0.3s ease, transform 0.2s ease;
}
.sqs-button-element--primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}2. Scroll-Triggered Entrance Animations
Entrance animations reveal content as the user scrolls. The key is subtlety — 400 to 600 milliseconds with gentle movements. The modern approach uses the Intersection Observer API:
/* Add to Custom CSS */
.animate-in {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Staggered delays for child elements */
.animate-in:nth-child(1) { transition-delay: 0ms; }
.animate-in:nth-child(2) { transition-delay: 100ms; }
.animate-in:nth-child(3) { transition-delay: 200ms; }
/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
.animate-in {
opacity: 1;
transform: none;
transition: none;
}
}<!-- Add to Footer Code Injection -->
<script>
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target); // animate once
}
});
}, { threshold: 0.15 });
// Target specific sections by ID or class
document.querySelectorAll('.page-section .content-wrapper')
.forEach(el => {
el.classList.add('animate-in');
observer.observe(el);
});
</script>3. Keyframe Animations
For more complex animations, CSS keyframes give you full control. Common patterns for business sites:
/* Subtle pulse on CTA button — draws attention */
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15); }
50% { box-shadow: 0 0 0 12px rgba(0, 0, 0, 0); }
}
.sqs-button-element--primary {
animation: pulse 3s infinite;
}
/* Gentle float effect on hero image */
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.hero-image img {
animation: float 4s ease-in-out infinite;
}
/* Gradient color shift on section background */
@keyframes gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.gradient-section {
background: linear-gradient(135deg, #667eea, #764ba2, #f97316);
background-size: 200% 200%;
animation: gradient-shift 8s ease infinite;
}Performance Rules
Use Our Tools
Start with one or two subtle animations and see how they feel. A hover effect on your navigation and a fade-in on your hero section can transform the entire experience.
