GSAP animation is not visible in published site

[Little_Genius_toys]

---

Here is my public share link: LINK
I have shared my sandbox link above. In the /house page, I have implemented a GSAP animation; it’s working nicely, but in the preview and published site, the animation is not visible. Kindly help.

[WebflowAIModerator]

Hi there,

When working with GSAP animations on published sites, you’ll need to follow these setup steps:

1. Enable GSAP in your site settings:
   • Navigate to Settings > GSAP integration
   • Toggle the GSAP library switch to “On”

For custom code animations, wrap your GSAP code in a DOMContentLoaded event listener to ensure all elements are loaded before the animation triggers:

document.addEventListener('DOMContentLoaded', function() {
    // Your GSAP animation code here
    gsap.to('.your-element', {
        // animation properties
    });
});

If animations still aren’t working, check for potential conflicts with other custom code or interactions on your page. Common issues include duplicate GSAP installations or timing conflicts with other scripts.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

EDITED BY A HUMAN KNOWN AS @magicmark
THIS IS NOT USEFUL.

[Little_Genius_toys]

I am not using GSAP through custom code, but from Webflow’s own GSAP panel, so do I need to enable the GSAP Interaction? But even after enable the interaction its not working

[moid.space (Moid Shaikh)]

Move the GSAP script to the page’s Before section and trigger it inside Webflow.push(() => { … }) so it runs after Webflow loads, this fixed the same issue on a recent build.

[Little_Genius_toys]

Hi Moid, thank you for your response. The thing is, I am not using any script here; the gsap animation is from the Webflow’s gsap interaction panel> So how can I move the script?
You can see the animation is working, but its not visible.

[AJ_Dev (from Memberstack)]

Hey @Little_Genius_toys ,

You can probably set your Scroll trigger settings as highlighted in the screenshot, to make it visible when the user scrolls:

This should make the interaction work and show the elements as you have setup correctly in the preview mode and published site as well.

Alternatively, if you want this animation to play only when the page loads irrespective of the scroll position, you can setup the animation to trigger via ‘Page Load’ instead of ‘Scroll’ trigger that you have setup currently. Here’s a cloneable that you can take inspiration from for setting up ‘Page Load’ interaction.

Hope this helps.