External Dependencies
Add third-party libraries like GSAP and Swiper that load before your project code.
External dependencies are third-party libraries that load before your project code. They appear as <script> or <link> tags in the generated embed code, positioned before your bundle.
Access the Dependencies Panel
Click the Dependencies icon in the left activity bar to open the panel.
Curated Presets
One-click presets for popular libraries used in Webflow development:
| Library | Version | Includes |
|---|---|---|
| GSAP | v3 | Core + plugins: ScrollTrigger, Flip, Draggable, Observer, ScrollSmoother, SplitText, MotionPathPlugin, DrawSVGPlugin, MorphSVGPlugin |
| Swiper | v11 | Full bundle (JS + CSS) |
| Lenis | v1 | Core + CSS + Snap extension |
| Barba.js | v2 | Core + Prefetch, CSS plugins |
Click a preset to add all its scripts. Deselect individual plugins if you do not need them.
NPM Search
- Type a package name in the search input.
- Select from the results. Odyn fetches the latest version from the npm registry.
- The jsdelivr CDN URL is added to your dependency list.
Custom URL
Paste any CDN URL directly (jsDelivr, unpkg, cdnjs, or a self-hosted URL). Odyn auto-detects whether the URL is a script or stylesheet.
Load Order
Dependencies load sequentially in the order they appear in the list. Order matters — a library that depends on another must appear after it.
Drag dependencies to reorder. The order is saved and reflected in the embed code.
Embed Integration
Dependencies appear in the generated embed code before your project bundle:
<!-- External Libraries -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>
<!-- Odyn - Production -->
<script src="https://cdn.odyn.dev/p/your-project/bundle.js" defer></script>Bare Import Warnings
If your code contains a bare import like import gsap from "gsap", Odyn shows a warning. Bare imports cannot be resolved from CDN dependencies — use the global variable instead (e.g., window.gsap or just gsap as a global).
See Bare Import Warnings for details.
Verification
After adding dependencies:
- Deploy to staging.
- Open the embed code dialog and confirm dependency tags appear before your bundle.
- Open your site's developer tools Network tab and verify all dependency URLs return 200.
- Check the Console for loading errors (e.g., 404 for a wrong version).