https://github.com/amolpalwe2002/gsap-basics
This repository is a collection of basic tutorials for the GreenSock Animation Platform (GSAP). Each lesson includes practical examples with active web pages, demonstrating how to create stunning animations using GSAP in combination with Tailwind CSS. Perfect for beginners looking to get started with web animations.
https://github.com/amolpalwe2002/gsap-basics
css gsap gsap-timeline html javascript tailwind-css
Last synced: 4 months ago
JSON representation
This repository is a collection of basic tutorials for the GreenSock Animation Platform (GSAP). Each lesson includes practical examples with active web pages, demonstrating how to create stunning animations using GSAP in combination with Tailwind CSS. Perfect for beginners looking to get started with web animations.
- Host: GitHub
- URL: https://github.com/amolpalwe2002/gsap-basics
- Owner: amolpalwe2002
- Created: 2024-06-06T10:08:33.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-11T08:43:21.000Z (12 months ago)
- Last Synced: 2025-01-03T08:30:23.407Z (5 months ago)
- Topics: css, gsap, gsap-timeline, html, javascript, tailwind-css
- Language: HTML
- Homepage:
- Size: 26.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# GSAP Basics Tutorial
Welcome to the GSAP Basics Tutorial repository! This repository contains a series of lessons designed to help you get started with the GreenSock Animation Platform (GSAP). Each lesson includes an active web page where you can see the animations in action.
## Table of Contents
- [Introduction](#introduction)
- [Setup](#setup)
- [Lessons](#lessons)
- [Lesson 1: Basic Animation](https://66618a718113c1009206734d--scintillating-caramel-892ffe.netlify.app/)
- [Lesson 2: Scroll Trigger](https://6662a63131a1e6c792aa487d--ornate-treacle-291a1b.netlify.app/)
- [Lesson 3: SVG, Cursor & MobileNav Animations](https://6666c4fe618a2f0e8085070a--benevolent-melba-455cd4.netlify.app/)
- [Running the Examples](#running-the-examples)
- [Resources](#resources)
## Introduction
GSAP (GreenSock Animation Platform) is a powerful JavaScript library for creating high-performance animations that work in all major browsers. It is easy to use, highly flexible, and has a robust set of features that allow you to animate anything you can imagine.
## Setup
To get started with GSAP, you will need basic HTML, CSS, and JavaScript files, along with the CDNs for Tailwind CSS and GSAP. Follow the steps below to set up your environment.
### Step 1: Create the Basic Files
Create the following files in your project directory:
1. `index.html`
2. `styles.css`
3. `script.js`
### Step 2: Include Tailwind CSS and GSAP
Add the following CDNs to your `index.html` file to include Tailwind CSS and GSAP.
```html
GSAP Basics Tutorial
```
## Resources
- [GSAP Documentation](https://gsap.com/docs/v3/GSAP/)
- [Tailwind CSS Documentation](https://tailwindcss.com/docs/installation)
Feel free to explore each lesson and modify the code to better understand how GSAP works. Happy animating!