Webflow and GSAP Animations

You can absolutely use Webflow and GSAP for animations in your Liquiflow 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.

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