This content originally appeared on DEV Community and was authored by iDev-Games
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:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/trig-js/src/trig-animations.min.css">
<script src="https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js"></script>
<div class="trig-fade enable-trig">
<span class="trig-target">.trig-fade</span>
</div>
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
</body>:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/trig-js/src/trig-animations.min.css">
<script src="https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js"></script>
2. Apply Animations
Now, add Trig.js animations to any element using the .trig- classes:
<div class="trig-slide-up enable-trig">
<span class="trig-target">Scroll to see me animate!</span>
</div>
🎉 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
</body>, insert:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/trig-js/src/trig-animations.min.css">
<script src="https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js"></script>
2. Add Animations in WordPress Blocks
If you’re using Gutenberg or Elementor, just add a custom HTML block:
<div class="trig-fade enable-trig">
<span class="trig-target">This text will fade in on scroll.</span>
</div>
💡 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:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/trig-js/src/trig-animations.min.css">
<script src="https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js"></script>
2. Apply Animations in Squarespace Blocks
- Edit any text or image block.
- Click
Edit HTMLand add:
<div class="trig-zoom enable-trig">
<span class="trig-target">Zoom Effect!</span>
</div>
🚀 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! 👇
This content originally appeared on DEV Community and was authored by iDev-Games
iDev-Games | Sciencx (2025-03-17T22:31:35+00:00) How to Add Scroll Animations in Webflow, WordPress, and Squarespace – The Easy Way. Retrieved from https://www.scien.cx/2025/03/17/how-to-add-scroll-animations-in-webflow-wordpress-and-squarespace-the-easy-way/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.