Animating Shape Blocks on Squarespace (The Start of Something HUGE)
Squarespace has quietly introduced a powerful new feature: the ability to transform shape blocks directly inside the editor - no CSS required.
This update is part of a much bigger rollout planned for the coming year, where Squarespace will bring more animation tools, more granular design control, and deeper customisation options to the platform.
Right now, we’re seeing the first 10 - 15% of that vision, and it’s already exciting. In this tutorial, I’ll walk you through exactly how to use the new Transform controls on shape blocks so you can begin experimenting with more dynamic, modern layouts.
What Are Shape Block Transforms?
Squarespace now gives you an entire panel of transformation tools for shape blocks, including:
Opacity
Rotate
Scale X / Scale Y
Offset X / Offset Y
Skew X / Skew Y
Anchor point selection
Previously, achieving any of these effects required writing custom CSS, targeting block IDs, and manually adjusting values. Now, you can apply these transformations visually with just a few sliders.
This is a major win for both designers and non-coders.
Want a framework for designing the perfect homepage?
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
How to Add and Transform a Shape Block in Squarespace
Follow these steps to start experimenting with the new transform features.
1. Add a Shape Block
Open your Squarespace page
Click Edit
Add a new block and search for Shape
Insert it into your section
Choose any shape you like - circle, diamond, blob - whatever works for your design.
2. Adjust the Shape’s Style
Before transforming, get the basics in place:
Resize the shape
Change its colour
Position it roughly where you’d like it to go
For example, make it red, stretch it slightly, or move it toward your header.
3. Open the Transform Controls
Click the shape block and you’ll see a new Transforms header. This is where the fun begins.
The available options include:
Opacity - Fade the shape in or out, great for subtle layering effects.
Rotate - Rotate the block to any angle. This used to require CSS,now you can just drag a slider. Want 70 degrees? Done.
Scale X & Scale Y - Stretch the shape horizontally or vertically without needing SVG edits or code.
Offset X & Offset Y - Move the shape relative to its original position. Perfect for fine-tuning placement.
Skew X & Skew Y - Tilt or distort the shape to create more dynamic visuals.
Anchor - Change the pivot point for rotations and scaling, top, center, bottom, etc. This lets you control how the transform behaves.
4. Duplicate Shapes for More Creative Layouts
Once you’ve transformed a shape, duplicate it to build layered compositions.
For example:
Duplicate the first shape
Change its shape type (e.g. switch a circle to a diamond)
Rotate it differently
Scale it larger or smaller
Offset it from the original
Experiment with skew for abstract layouts
You can create truly interesting hero sections, backgrounds, or decorative accents, all without touching code.
5. Preview and Save Your Design
When you exit the editor, you’ll see all the transformations applied in real time.
If you’re happy with the results:
Drag blocks into place
Hit Save
Exit the editor
And that’s it, you’ve created a fully customised hero section using the new Squarespace transform tools.
Why This Update Is a Big Deal for Squarespace Designers
Before this feature, rotating or skewing even one block required:
Finding the block ID
Writing CSS
Testing the values
Adjusting pixel offsets manually
If you wanted to change more than one block, you had to repeat the entire process.
Now, all of this is built directly into the platform. It’s faster, cleaner, and far more accessible, especially for non-developers.
This is only the beginning of Squarespace's new animation and transform system, and much more is on the way.
Final Thoughts
The new Shape Block Transform tools give you a level of visual control that Squarespace simply didn’t have before. Whether you’re a designer or a beginner building your first website, you can now create more dynamic layouts with ease - no coding necessary.
