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 you can add to Squarespace: CSS-only hover effects, scroll-triggered entrance animations, and advanced keyframe animations. Each approach uses Code Injection or Custom CSS with no external libraries required.
CSS Hover Effects
Hover effects are the easiest animations to add and they make the biggest immediate impact on how your site feels. A well-chosen hover effect turns a static page into an interactive experience.
The most effective hover effects for Squarespace sites are image zoom (scale transform on image blocks), button color transitions (background-color and color with easing), card lift effects (translateY combined with box-shadow), and text underline animations (using pseudo-elements or background-image techniques).
Add hover effects through Design → Custom CSS. Target Squarespace block classes or use section IDs for more specific targeting. Always include a transition property on the base state, not the hover state. This ensures smooth animation in both directions.
Our Animation Generator includes twelve preset hover effects you can preview and customize before copying the CSS.
Scroll-Triggered Entrance Animations
Entrance animations reveal content as the user scrolls down the page. They add a sense of progression and keep the experience engaging. The key is subtlety. Animations that are too dramatic or too slow feel gimmicky. Aim for animations that take 400 to 600 milliseconds and use gentle movements.
The modern approach uses the Intersection Observer API. This JavaScript API watches for elements entering the viewport and triggers a CSS class change when they appear. It is performant, battery-friendly, and widely supported.
The pattern is simple. Define a CSS class for the hidden state (opacity zero, slight translateY), define a class for the visible state (opacity one, translateY zero), and use JavaScript to toggle between them when the element enters the viewport.
Add the CSS to Custom CSS and the JavaScript to footer Code Injection. Target specific sections or blocks using their Squarespace-generated IDs. You can find these IDs by right-clicking the section and selecting Inspect Element.
Staggered Animations
Staggered animations are when multiple elements animate in sequence with a slight delay between each one. For example, three feature cards that fade in one after another. This creates a cascade effect that draws the eye through your content.
Implement staggering with CSS transition-delay. Give each element an increasing delay: the first item gets 0 milliseconds, the second gets 100 milliseconds, the third gets 200 milliseconds. When the Intersection Observer triggers the visible class, all elements start their transition but at staggered times.
Use CSS custom properties to make delays configurable. Set a --delay property on each element and reference it in the transition-delay. This is cleaner than writing separate CSS rules for each item.
Keyframe Animations
For more complex animations, CSS keyframes give you full control. Keyframes define multiple steps in an animation with specific timing. You can create pulsing buttons, floating elements, rotating icons, gradient shifts, and loading indicators.
Define keyframes in Custom CSS. Use animation shorthand to apply them to elements. Important properties are animation-duration (how long one cycle takes), animation-timing-function (the easing curve), animation-iteration-count (once or infinite), and animation-fill-mode (what state the element stays in after the animation).
Common keyframe animations for business sites include a subtle pulse on CTA buttons to draw attention, a gentle float effect on hero images, a gradient color shift on section backgrounds, and typing cursor blink effects for text-heavy hero sections.
Performance Considerations
Not all CSS properties animate efficiently. The browser can animate transform and opacity without triggering layout recalculations. These properties are GPU-accelerated and run at 60 frames per second even on mobile devices.
Avoid animating width, height, margin, padding, or top/left/right/bottom. These trigger layout recalculations on every frame and will cause jank, especially on lower-powered devices. Instead, use transform: scale() instead of width and height changes, and transform: translate() instead of position changes.
Always respect the prefers-reduced-motion media query. Some users have motion sensitivity, and operating systems provide a setting to reduce animations. Wrap your animations in a media query that disables them when the user prefers reduced motion.
Tools for Squarespace Animations
Our Animation Generator creates both hover effects and scroll animations. Choose from presets, customize the timing and easing, and copy the generated code. It outputs the CSS and JavaScript together, ready for Code Injection.
For simpler effects, our Code Snippet Library includes tested animation snippets you can copy and paste. And for a broader look at CSS techniques, check our guide on 10 CSS Tricks for Squarespace.
Get Started
Start with one or two subtle animations and see how they feel. A hover effect on your main navigation and a fade-in on your hero section can transform the entire experience. Add more gradually as you find what works for your brand.
Browse our complete tools collection for more ways to customize your Squarespace site.