# 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="https://497333298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FheMDp56vLoqqIp7IZZ2W%2Fuploads%2Fzvbd6a02KKEucWRA0ZIw%2FBildschirmfoto%202025-11-23%20um%2022.10.33.png?alt=media&#x26;token=d8ae2901-74cc-48b7-90f1-4ef0a8189bb4" 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.