https://github.com/clementmadiot/typing_animation-typescript

Replicate the typing animations in TypeScript without using a library
https://github.com/clementmadiot/typing_animation-typescript

Last synced: 12 days ago
JSON representation

Replicate the typing animations in TypeScript without using a library

• Host: GitHub
• URL: https://github.com/clementmadiot/typing_animation-typescript
• Owner: ClementMadiot
• Created: 2024-11-08T09:53:21.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-11-08T11:17:07.000Z (about 2 months ago)
• Last Synced: 2024-11-08T11:23:12.613Z (about 2 months ago)
• Language: TypeScript
• Size: 30.3 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  


 


    

    

  

  
Elegant Text Reveal



## 
 📋 Summary

- ✨ [Introduction](#introduction)

- 🛠 [Technology Used](#tech-stack)

- 📝 [Features](#features)

- 🚀 [Launch App](#launch-app)

## 
 ✨ Introduction

**[ENG]** This project showcases an elegant Text Reveal Effect built using TypeScript and Framer Motion. It utilizes the power of Framer Motion's staggerChildren prop to create a visually appealing animation.

**[FR]** Ce projet présente un effet de révélation de texte élégant construit à l'aide de TypeScript et de Framer Motion. Il utilise la puissance de la propriété staggerChildren de Framer Motion pour créer une animation visuellement attrayante.

## 
 🛠 Technology Used

- [framer-motion](https://www.npmjs.com/package/framer-motion)

  Framer Motion is an open source, production-ready library that’s designed for all creative developers.

- 📝 [Features](#features)

## 📝 Features

👉 **Staggered Text Reveal** : Employs Framer Motion's staggerChildren prop to animate the reveal of text characters with a stylish delay.

## 
 🚀 Launch App

Follow these steps to set up the project locally on your machine.

**Prerequisites**

> [!NOTE]

> Make sure you have the following installed on your machine:

- [Git](https://git-scm.com/)

- [Node.js](https://nodejs.org/en)

- [npm](https://www.npmjs.com/) _(Node Package Manager)_

**Cloning the Repository**

```bash

git clone {git remote URL}

cd {git project..}

```

**Installation**

> After cloning the repository, run the command `npm i` or `yarn i` to install the project's dependencies.

_npm_

```

npm install

```

_yarn_

```

yarn install

```

> Once the dependencies are installed, start the project with the command `npm run dev`.