Scroll animations can make your website feel dynamic and engaging, but adding them in platforms like Webflow, WordPress, and Squarespace can be tricky. While these platforms offer some built-in animation tools, they often come with limitations. What if you could get lightweight, flexible, and high-performance scroll animations with minimal effort?

That’s where Trig.js comes in! As the developer of Trig.js, I’ll show you how to easily add scroll animations to Webflow, WordPress, and Squarespace—without relying on bloated plugins or complex JavaScript.

📌 Why Use Trig.js for Scroll Animations?

1. Lightweight & Fast

Most animation libraries rely heavily on JavaScript, leading to performance issues. Trig.js is CSS-powered, meaning the browser handles animations natively with hardware acceleration for smooth, fast animations.

2. Easy Setup – No Coding Required

Adding animations is as simple as using Trig.js classes:

rel="stylesheet" href="https://cdn.jsdelivr.net/npm/trig-js/src/trig-animations.min.css">
<span class="na">src="https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js">
class="trig-fade enable-trig">
     class="trig-target">.trig-fade

3. Works on Any Platform

Whether you’re using Webflow, WordPress, or Squarespace, Trig.js works seamlessly—just include the script and apply animations to your elements.

🏗️ Adding Scroll Animations to Webflow

Webflow has built-in scroll animations, but they can be limited in customization and performance. Here’s how to add Trig.js instead:

1. Include Trig.js in Webflow

  • Open Webflow’s Custom Code section.
  • Add this before : 
rel="stylesheet" href="https://cdn.jsdelivr.net/npm/trig-js/src/trig-animations.min.css">
<span class="na">src="https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js">

2. Apply Animations

Now, add Trig.js animations to any element using the .trig- classes:

class="trig-slide-up enable-trig">
     class="trig-target">Scroll to see me animate!

🎉 Done! Your Webflow site now has smooth scroll animations without extra load.

📝 Adding Scroll Animations to WordPress (Without Plugins)

Many WordPress animation plugins slow down websites with excessive JavaScript. Here’s how to add Trig.js without plugins.

1. Add Trig.js to WordPress

  • Go to Appearance > Theme Editor > footer.php
  • Before , insert: 
rel="stylesheet" href="https://cdn.jsdelivr.net/npm/trig-js/src/trig-animations.min.css">
<span class="na">src="https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js">

However the best way to add Trig.js to your WordPress site is by enqueuing it in your functions.php file. This approach ensures proper loading and avoids editing core theme files. You should also create a child theme of your main theme so you can continue updating your theme. Here's how to do it:

// Add Trig.js to WordPress
function enqueue_trig_js() {
    // Enqueue the stylesheet
    wp_enqueue_style('trig-animations', 'https://cdn.jsdelivr.net/npm/trig-js/src/trig-animations.min.css');
    // Enqueue the JavaScript
    wp_enqueue_script('trig-js', 'https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_trig_js');

2. Add Animations in WordPress Blocks

If you’re using Gutenberg or Elementor, just add a custom HTML block:

class="trig-fade enable-trig">
     class="trig-target">This text will fade in on scroll.

💡 Now your WordPress site has smooth scroll animations—without slowing it down!

🖼️ Adding Scroll Animations to Squarespace

Squarespace has limited animation controls, but Trig.js makes it easy to extend its functionality.

1. Add Trig.js to Squarespace

  • Go to Settings > Advanced > Code Injection
  • Add this in the footer: 
rel="stylesheet" href="https://cdn.jsdelivr.net/npm/trig-js/src/trig-animations.min.css">
<span class="na">src="https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js">

2. Apply Animations in Squarespace Blocks

  • Edit any text or image block.
  • Click Edit HTML and add: 
class="trig-zoom enable-trig">
     class="trig-target">Zoom Effect!

🚀 Now, you have full animation control on Squarespace!

🔥 Why Use Trig.js Over AOS.js or Webflow’s Built-in Animations?

Feature Trig.js 🏆 AOS.js Webflow Animations
Lightweight (≈4KB) ✅ ❌ (≈6KB) ❌ (Heavy)
CSS-based (Fastest) ✅ ❌ ✅
Easy Setup ✅ ✅ ✅
Full Scroll Control ✅ ❌ ❌

If you want the best performance, simplest setup, and full animation control, Trig.js is the way to go!

🎯 Conclusion – The Best Scroll Animation Solution for Any Website

Whether you use Webflow, WordPress, or Squarespace, Trig.js makes scroll animations simple, lightweight, and powerful. Unlike AOS.js or built-in animation tools, it prioritizes performance and ease of use—giving you beautiful animations without slowing down your site.

🔗 GitHub Repo | Docs & Setup | Live Demos

💬 Have questions? Need help? Drop a comment below! 👇