https://github.com/hetari/gsap-with-vue

A sample project demonstrating how to create stunning web animations using GSAP (GreenSock Animation Platform) with Vue.js and TypeScript.
https://github.com/hetari/gsap-with-vue

gsap typescript vue

Last synced: about 5 hours ago
JSON representation

A sample project demonstrating how to create stunning web animations using GSAP (GreenSock Animation Platform) with Vue.js and TypeScript.

• Host: GitHub
• URL: https://github.com/hetari/gsap-with-vue
• Owner: Hetari
• Created: 2024-04-08T00:44:31.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-04-08T22:11:07.000Z (7 months ago)
• Last Synced: 2024-04-09T02:40:07.368Z (7 months ago)
• Topics: gsap, typescript, vue
• Language: Vue
• Homepage: https://hetari.github.io/gsap-with-vue/
• Size: 190 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# web-motion-with-gsap

A sample project demonstrating how to create stunning web animations using GSAP (GreenSock Animation Platform) with Vue.js and TypeScript.

## Features

- **GSAP Integration**: Utilize the powerful GSAP library for smooth animations.

- **Vue.js Framework**: Built on top of Vue.js for reactive and efficient UI updates.

- **TypeScript Support**: Write safer and more maintainable code with TypeScript.

- **Responsive Design**: Implement animations that adapt seamlessly to different screen sizes.

- **Easy to Customize**: Modular structure allows for easy customization and expansion.

## Type Support for `.vue` Imports in TS

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.

## Getting Started

![repo image](repo-image.png)

To get a local copy up and running follow these simple steps.

### Prerequisites

Make sure you have Node.js and npm installed on your machine.

#### Installation

1. Clone the repo

   ```bash

   git clone https://github.com/yourusername/web-motion-with-gsap.git

   ```

2. Install npm packages

   ```bash

   npm install

   ```

#### Compile and Hot-Reload for Development

```sh

npm run dev

```

#### Type-Check, Compile and Minify for Production

```sh

npm run build

```