GSAP inconsistencies 🤔

[narrow gazelle]

I've been trying to implement GSAP animations into my site and it more or less works but I do have some inconsistencies when reloading/page transitioning.

My main problem seems to be my project meta on the homepage thumbnails images becoming visible and static on load rather than becoming visible on hover and following the cursor. But only sometimes which is confusing me slightly.

I also have my content flashing before reloading with the correct transitions which I feel should be a simple fix with astro but I'm too much a rookie to figure it out.

Is there a way I can make it load consistently? I'm not sure what the best approach would be without causing more problems.

https://porkfolio.vercel.app

[mint hemlock]

Do you set initial state of the animation with gsap? If so, this is not Astro related problem. You will have to hide elements with CSS and animate to end state to prevent initial state from being visible. Here is one of many threads on GSAP's official forum.

Here and here are two more threads. But they all talk about the same problem.

[narrow gazelle]

Ah thanks for the links. I wasn't sure if it was being caused by this snippet of code in my gsap config script (specifically the astro:before-swap) hence why I thought I'd double check here first before looking over their docs:

`import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

// Register plugins once
gsap.registerPlugin(ScrollTrigger);

// Create a shared context and ensure it's cleared on page transitions
let context = gsap.context(() => {});

// Reset context on page transitions
document.addEventListener('astro:before-swap', () => {
context.revert();
context = gsap.context(() => {});
});

export { gsap, ScrollTrigger, context };`

[mint hemlock]

No, the script does not have any logical errors. I use the same animation related structure with root context as well as media queries sometimes.