> For the complete documentation index, see [llms.txt](https://docs.liquiflow.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.liquiflow.app/useful/webflow-and-gsap-animations.md).

# Webflow and GSAP Animations

You can absolutely use Webflow and GSAP for animations in your <code class="expression">space.vars.Company</code> ecommerce build. Just keep a few important things in mind to make sure everything works smoothly in Shopify.

### Webflow Animations

* **Use classes as targets:** Avoid targeting elements by ID, especially for repeating items like product cards or blocks. Webflow auto-generates IDs, and Shopify won’t accept duplicate IDs. Classes are safe and repeatable.
* **Don’t use Sections as triggers:** Shopify generates its own \<section> tags. You can't add attributes or IDs to them, but they’re not reliable as animation triggers. Instead, place your trigger on an element *inside* the section.
* **Always check the structure in the Shopify preview**: If an animation isn’t firing, open the Shopify preview in a new Tab and inspect the HTML. The class names or structure could differ slightly, and you’ll immediately spot what’s missing.

### GSAP Animations

* **Install GSAP in Webflow Project Settings**: To use GSAP, include the necessary libraries in your Webflow Project Settings.

<figure><img src="/files/1F0fYsAg3em0QZiYGZAw" alt=""><figcaption></figcaption></figure>

* **Use classes as targets:** Avoid targeting elements by ID, especially for repeating items like product cards or blocks. Webflow auto-generates IDs, and Shopify won’t accept duplicate IDs. Classes are safe and repeatable.