Chapter 59: Squarespace animation guide

Core Idea

Elevate your Squarespace site with Motion: a free, high-performance animation library. Break free from template limits, create stunning animations, and boost your SEO with its incredibly small footprint. Easy to install and customize for optimal site speed and search ranking.

Key Concepts

• Installation: Installing Motion on a Squarespace site is super-easy.
• Selecting elements: In order to animate elements
• Custom scripts: By importing scripts directly from this URL
• Next: Now that you have Motion running in your Squarespace project
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

<script type="module" defer>
    import { animate } from "https://cdn.jsdelivr.net/npm/motion@11.13.5/+esm"

    // Your animation code here
    animate("h1", { opacity: [0, 1] })
</script>

• What it demonstrates: Core usage pattern for Squarespace animation guide.

Key Takeaways

1. Flexibility: You're not limited to the template's in-built options (if any). You can d.
2. Performance: Motion is built on the latest browser APIs for hardware accelerated perfo.
3. Improved SEO: Motion's tiny animate() function is just 2.6kb, and the rest of the li.

Connects To

• Scroll animations in JavaScript with scroll(): related Motion doc page.
• animate(): related Motion doc page.
• Get started with Motion: related Motion doc page.
• CSS spring animations for React, Astro and Vue: related Motion doc page.
• Webflow animation guide: related Motion doc page.