# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.liquiflow.app/useful/webflow-and-gsap-animations.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.