astrojs AstroJS and GSAP not animating properly.

[Ken Flores]

1/ So I’m using GSAP (GreenSock) for smooth animations in my Astro.js project. Everything should look buttery smooth, right?

But instead, animations play at random speeds — sometimes smooth, sometimes super fast, other times weirdly slow. Like lagging but not quite…

 

2/ I tested it with ScrollTrigger and without ScrollTrigger, and the issue still happens.

👉 If I set a fast animation (short duration), it gets even more broken — speeding up & slowing down erratically. Almost like the browser is catching up to missed frames.

 

3/ It’s not a typical FPS drop.

• Sometimes the animation starts slow, then jumps and speeds up halfway through.

• Other times, it’s fast-forwarding unpredictably.

• No consistent easing curve — even though I’m using simple eases like power1.inOut.

 

4/ ✅ Things I’ve tried:

• Basic GSAP timelines without ScrollTrigger — ❌ still broken.

• Tried isolating GSAP outside Astro components — ❌ same issue.

• Even static (non-scroll) animations with very short durations (like duration: 0.5) act extra weird.

 

5/ ❓ My theory?

Seems like Astro’s partial hydration / rendering strategy might be conflicting with how GSAP runs and measures time under the hood.

Maybe animation frames or requestAnimationFrame (RAF) isn’t syncing well with Astro’s lifecycle.

 

6/ So if you’re using Astro + GSAP and seeing:

• Fast/slow/fast inconsistent animations

• Animations “catching up” midway

• Super weird behavior at short durations

 

👉 You’re not alone.

 

7/ 🚨 If anyone has successfully combined Astro.js + GSAP (with or without ScrollTrigger) — would love to hear how you did it!

For now, might need to rethink how GSAP runs in an Astro context (maybe move to a client-rendered framework or island?).

 

8/ Will keep experimenting. If I find a fix/workaround, I’ll share it here.

If you’ve solved this — please drop your insights below!
 

 

Here is the code itself: 

 

 

<script>

import { gsap } from 'gsap'

import { ScrollTrigger } from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

 

window.addEventListener("load", () => {

 

gsap.to('.atext', {

yPercent: 200,

opacity: 0,

duration: 3,

scrollTrigger: {

trigger: '.atext',

start: 'top 30%',

end: 'bottom 0%',

scrub: true,

markers: true

},

})

});

 

</script>

thanks in advance! 

[GreenSock]

I don't have time to look into this deeply right now, but it sure sounds like you must have CSS transitions applied to the things you're animating with GSAP which is a big no-no because basically every time GSAP tries to update a property (which it does 60 times per second), the browser is like "NOPE! I won't apply that now... I'm gonna drag that out over time and gradually make that change due to the CSS transitions..." Terrible for performance, and of course it'll make things behave strangely too since GSAP's hands are cuffed. 

 

I glanced at your file and it does look like you've got CSS transitions applied. Remove all those and I bet you'll see things work great. 🙂

[Ken Flores]

@GreenSock you were absolutely correct. transition-all from tailwind in the element caused this.  Thanks for the quick response!