Home/前端开发/gsap-awwwards-website
G

gsap-awwwards-website

by @eng0aiv
4.7(66)

Builds SPYLT product landing pages using GSAP scroll animations and React 19, achieving a smooth interactive experience.

GSAP (GreenSock Animation Platform)Awwwards DesignWeb AnimationFrontend DevelopmentJavaScriptGitHub
Installation
npx skills add eng0ai/eng0-template-skills --skill gsap-awwwards-website
compare_arrows

Before / After Comparison

1
Before

Traditional web animation development is complex, performance optimization is difficult, and achieving smooth scroll effects is challenging. Websites often lack sufficient visual expressiveness, making it hard to stand out among many others.

After

By combining GSAP, React, and Tailwind, you can easily create high-performance scroll animations. The website's visual effects will be stunning, the user experience smooth, reaching Awwwards-level quality.

description SKILL.md


name: gsap-awwwards-website description: SPYLT product landing with GSAP scroll animations, React 19, and Tailwind CSS 4.

GSAP Awwwards Website

A stunning product landing page with GSAP scroll animations, modern React 19 architecture, and Tailwind CSS 4 styling.

Tech Stack

  • Framework: React 19
  • Build Tool: Vite
  • Animation: GSAP
  • Styling: Tailwind CSS 4
  • Package Manager: npm
  • Output: dist directory
  • Dev Port: 5173

Setup

1. Clone the Template

git clone --depth 1 https://github.com/Eng0AI/gsap-awwwards-website-template.git .

If the directory is not empty:

git clone --depth 1 https://github.com/Eng0AI/gsap-awwwards-website-template.git _temp_template
mv _temp_template/* _temp_template/.* . 2>/dev/null || true
rm -rf _temp_template

2. Remove Git History (Optional)

rm -rf .git
git init

3. Install Dependencies

npm install

Build

npm run build

Creates a production build in the dist/ directory.

Deploy

CRITICAL: For Vercel, you MUST use vercel build --prod then vercel deploy --prebuilt --prod. Never use vercel --prod directly.

Vercel (Recommended)

vercel pull --yes -t $VERCEL_TOKEN
vercel build --prod -t $VERCEL_TOKEN
vercel deploy --prebuilt --prod --yes -t $VERCEL_TOKEN

Netlify

netlify deploy --prod --dir=dist

Development

npm run dev

Opens at http://localhost:5173

Notes

  • Static React site - no environment variables needed
  • Never run npm run dev in VM environment

forumUser Reviews (0)

Write a Review

Effect
Usability
Docs
Compatibility

No reviews yet

Statistics

Installs1.7K
Rating4.7 / 5.0
Version
Updated2026年3月16日
Comparisons1

User Rating

4.7(66)
5
0%
4
0%
3
0%
2
0%
1
0%

Rate this Skill

0.0

Compatible Platforms

🔧Claude Code
🔧OpenClaw
🔧OpenCode
🔧Codex
🔧Gemini CLI
🔧GitHub Copilot
🔧Amp
🔧Kimi CLI

Timeline

Created2026年3月16日
Last Updated2026年3月16日