Using Magnetic Motion Animations

The Magnetic Motion tool creates dynamic, interactive hover effects that bring your Squarespace blocks to life with movement and 3D tactile effects. This powerful animation tool goes beyond traditional hover effects by adding magnetic-style interactions that follow your visitor's cursor movement, creating engaging experiences that draw attention to important content and calls-to-action.

Accessing Magnetic Motion

The Magnetic Motion tool is available for any block on your Squarespace site. To access the tool:

1. Select the block you want to animate
2. Open the SquareKicker Extension
3. Navigate to the Advanced tab
4. Select Magnetic Motion from the menu

 

Magnetic Motion Effects

The foundation of Magnetic Motion is Block Tilt, which creates realistic 3D movement as visitors move their cursor over your elements. This tilt effect serves as the foundation for most other Magnetic Motion features—you’ll need either horizontal or vertical tilt active for effects Scale, Freeze, Follow, and Start Position to function.

Block Tilt

Angles and Intensity Block Tilt is the primary Magnetic Motion control that creates 3D movement as visitors move their cursor over the element.

• Vertical and Horizontal Tilt: Both directions are applied by default and can be customized independently
• Intensity Slider: Adjust the strength of the tilt effect from subtle to dramatic
• Reverse Option: Creates an opposite magnetic effect where the block moves away from the cursor

Glare

The Glare setting adds a customizable light reflection that moves with the tilt animation, simulating a glossy or reflective surface.

• Brightness Control: Adjust the intensity of the light reflection
• Custom Color: Choose a specific color for the glare effect to match your brand or design

Scale

Scale adds a size change effect to complement your tilt animation, creating additional visual interest.

• Size Increase/Decrease: Elements can grow larger or smaller during interaction

Freeze

The Freeze setting locks your animation in its tilted position after the cursor leaves the element, rather than returning to neutral. Elements remain visually "frozen" in their tilted state

• Manual Reset: Elements return to neutral when the page is refreshed or revisited

Follow

Follow creates screen-wide magnetic interaction where the element continues to respond to cursor movement even when not directly hovering over it. Block maintains magnetic pull toward the cursor across the entire screen

Start Position

Start Position allows you to set an initial tilt state that appears immediately when the page loads, before any user interaction. Creates engaging layouts from the moment visitors arrive

• Customizable Angles: Set specific starting tilt positions for horizontal and vertical directions

In this tutorial, we'll show you how to use all the effects and show some super inspiring ideas for using Magnetic Motion on your site. 

 

Best Practices

• Subtle vs. Bold: Adjust intensity based on your brand personality and user experience goals
• Performance Consideration: Apply Magnetic Motion selectively to key elements rather than site-wide
• Mobile Optimization: Test effects across devices as touch interactions differ from mouse hover
• Content Hierarchy: Use stronger effects on more important elements to guide visitor attention