mirror of
https://github.com/greensock/gsap-skills
synced 2026-09-22 23:34:24 +08:00
Rodrigo Hernando
63353bf7a2
- Adds a Vue folder in the examples, with a Vue demo using the Composition API - Adds a Nuxt folder in the examples, that includes a re-usable composable for importing and registering all the GSAP Plugins at a top level file and lazy-load plugins that are not extensively used in the app - Modifies the SKILL.MD file in the gsap-frameworks folder to reflect the previous addition
30 lines
1.5 KiB
Markdown
30 lines
1.5 KiB
Markdown
# GSAP skills — reference examples
|
|
|
|
Minimal demos that follow the skills exactly: transforms, autoAlpha, timelines, ScrollTrigger, and framework-specific patterns (useGSAP in React, onMount/onUnmount with gsap.context in Vue/Nuxt).
|
|
|
|
## Vanilla (HTML + JS)
|
|
|
|
- **examples/vanilla/** — single HTML page + ES module.
|
|
- Uses GSAP from CDN (ESM). Open with a local server that supports ES modules (e.g. `npx serve examples/vanilla` from repo root).
|
|
- Patterns: `gsap.to()` with `x`/`autoAlpha`, `gsap.timeline()` with defaults and position parameter, ScrollTrigger on the timeline.
|
|
|
|
## React
|
|
|
|
- **examples/react/** — Vite + React + `@gsap/react`.
|
|
- From repo root: `cd examples/react && npm install && npm run dev`.
|
|
- Patterns: `useGSAP()` with `scope: containerRef`, refs for targets, no selectors without scope; cleanup is automatic on unmount.
|
|
|
|
These examples are intended as reference implementations for AI agents and for quick manual verification of the skill patterns.
|
|
|
|
## Vue
|
|
|
|
- **examples/vue/** — Vite + Vue 3 + `<script setup>`.
|
|
- From repo root: `cd examples/vue && npm install && npm run dev`.
|
|
- Patterns: `gsap.context(() => {}, scope)` via `<script setup>`, `onMounted`/`onUnmounted` cleanup, ScrollTrigger on timeline, autoAlpha, stagger.
|
|
|
|
## Nuxt
|
|
|
|
- **examples/nuxt/** — Nuxt 4 with GSAP client-only re-usable composable.
|
|
- From repo root: `cd examples/nuxt && npm install && npm run dev`.
|
|
- Patterns: GSAP as client-only composable (`useGSAP.client.ts`), for gsap access, lazy-loading plugins, `gsap.context(() => {}, scope)` cleanup.
|