How to Animate on Scroll in Squarespace 2025 (Pro Results!)
Did you know Squarespace doesn’t offer a way to add scrolling animations to your images by default?
The good news? You can use Spark Plugin to add animations to your images, making your website look more professional and encouraging visitors to stick around!
Here’s how to add our brilliant Squarespace scroll animations customization to your site in three simple steps.
How to add Squarespace animate on scroll to your site
Step 1: Install Spark Plugin
(If you’ve already installed Spark Plugin on your site, skip to the next step!)
When you sign up for Spark Plugin, you’ll receive a code snippet. Go to Website, Website Tools, and Code Injection and paste the snippet in the header box. Click Save when you’re done.
You’ll then see a small pink ‘K’ icon in the top-right-hand corner of your Squarespace site. If you don’t see it, close your browser, log out of your Squarespace site, and log in again.
Step 2: Choose your image
Go to the page that you want to animate images on.
Open the Spark Plugin menu and click on the image you want to animate. A red border will appear around the image, and an image-specific menu will appear.
Scroll down until you see Animate on scroll.
Step 3: Animate your image
Click on the Animate on scroll menu to apply one of our many animations to your image. Spark Plugin will show you an example of how your image will look when you choose an animation.
Choose from:
Parallax: Make your image move at a different speed than your background content, creating the illusion of depth
Slide left: Make your image slide in from right to left as you scroll
Slide right: Make your image slide in from left to right as you scroll
Slide up: Make your image slide upwards as you scroll
Slide down: Make your image slide downwards as you scroll
Scale up: Make your image increase in size as you scroll
Scale down: Make your image decrease in size as you scroll
Fade in: Make your image move from transparent to opaque as you scroll
Flip: Make your image flip upwards as you scroll
Focus: Make your image come into focus as you scroll
Spin: Make your image spin around as you scroll
3D: Make your image move in a way that provides a unique 3D effect
You can also customize your animations for a bespoke look and feel (bear in mind that some options aren’t available for all animations). You can:
Set when to start and end the animation (for example, when the block has scrolled halfway across the screen
Whether you want to slide the image left, right, up, or down
Change the slide speed
Add a zoom
Choose whether to fade in or out
Rotate, focus, or flip your image
Make the animation visible on mobile or desktop only
If you want to remove an animation from an image, just choose Default.
When you’re done, click out of the Spark Plugin menu and Save your page.
Squarespace scroll animation FAQ
Got any questions about Squarespace and animating on scroll? You’ll find the answers here!
What is a Squarespace scroll animation?
This is when you animate a photo or image so it moves smoothly as you scroll up or down a page.
It’s a fantastic way to make your website more engaging, increasing the chances of visitors staying on your site and converting.
Can I add animate on scroll effects to any image on my site?
Yes, you can add an animation to any image, and you can have as many different animations as you want on a page.
Can I apply the same animations to all the images on my site at once?
Unfortunately you can only apply animations to individual images. This is intentional, as having animated scroll animations on all your images may be a bit much for your site visitors!
It’s better to apply animated scroll animations to selected images to make them stand out.
Can I add any other effects to my Squarespace scroll animation?
You can! Spark Plugin offers a wide range of additional image customizations you can apply to your images.
For example you can add a shadow, place a shape-shifting effect on your image, or remove the gray overlay Squarespace often adds to images.
We’re proud of all of the Squarespace customizations we create, but especially of this one—our biggest update yet!
Our team spent lots of time developing it, and we hope you enjoy using it.
