A collection of interactive web experiences showcasing the power of GSAP (GreenSock Animation Platform) animations and modern web technologies.
| Project | Description | Live Demo | Key Features |
|---|---|---|---|
| Velvet Pour Landing Page | Smooth, luxurious landing page with fluid animations | View Demo | Smooth scrolling, elegant transitions |
| Rippling 3D Text Displacement | Interactive 3D text effects with displacement animations | View Demo | 3D text effects, displacement mapping |
| Keep Scrolling | Scroll-triggered animations and interactions | View Demo | Scroll-based animations, parallax effects |
| Cyberfiction | A cinematic, cyber-themed animated experience with GSAP and WebGL | View Demo | GSAP timelines, canvas integration, animated 3D text loop |
| Airplanes 101 | A playful and animated airplane-themed web journey using GSAP and Three.js | View Demo | SVG and canvas animations, parallax effects and GSAP ScrollTrigger |
| Lagunitas My Take | Bold, experimental layout with striking visuals and type | View Demo | Loud typography, bold transitions, custom GSAP animations |
| Fanta My Take | A vibrant reimagination of the Fanta landing page with juicy motion design | View Demo | Scroll-triggered fruit animations, layered SVG graphics, GSAP timelines, responsive design |
| Simple 3D Scroll | Minimalist award-themed scroll animation built with GSAP | View Demo | Fixed content, scroll-based zoom animations, minimal layout and scaling effects |
- GSAP - Industry-standard animation library
- HTML5/CSS3 - Modern web standards
- JavaScript - Interactive functionality
- Vercel - Deployment platform
- Smooth Animations - Buttery smooth 60fps animations
- Responsive Design - Works across all devices
- Interactive Elements - Engaging user interactions
- Performance Optimized - Lightweight and fast loading
- Modern UI/UX - Contemporary design patterns
- Scroll-triggered animations
- 3D transformations
- Text displacement effects
- Parallax scrolling
- Smooth page transitions
- Interactive hover effects
- Timeline-based animations
- Modern web browser
- Basic knowledge of HTML, CSS, JavaScript
- Familiarity with GSAP (helpful but not required)
# Clone the repository
git clone https://github.com/aridepai17/GSAP-ANIMATED-PAGES.git
# Navigate to project directory
cd GSAP-ANIMATED-PAGES
# Open any project folder and run with a local server
# For example, using Python:
python -m http.server 8000
# Or using Node.js:
npx serve .GSAP-ANIMATED-PAGES/
├── velvet-pour-landing/
├── rippling-3d-text/
├── keep-scrolling/
├── README.md
└── [future projects...]
Each project in this collection demonstrates different aspects of modern web animation:
- Performance First - Optimized animations that don't compromise user experience
- Purposeful Motion - Every animation serves a functional or aesthetic purpose
- Accessibility Aware - Respecting user preferences for reduced motion
- Mobile Responsive - Animations that work beautifully on all screen sizes
All projects are deployed on Vercel for optimal performance and reliability. Each demo showcases production-ready code that can be easily integrated into larger projects.
Feel free to fork this repository and submit pull requests for improvements or new animation demos!
This project is open source and available under the MIT License.
- GitHub: @aridepai17
⭐ If you found these animations helpful, please star the repository!
This collection is continuously growing. Check back for new animated experiences!