├── .prettierrc
├── src
├── vite-env.d.ts
├── main.tsx
├── index.css
└── App.tsx
├── postcss.config.js
├── vite.config.ts
├── tailwind.config.js
├── tsconfig.node.json
├── .csb.json
├── .gitignore
├── index.html
├── .eslintrc.cjs
├── tsconfig.json
├── package.json
├── README.md
└── yarn.lock
/.prettierrc:
--------------------------------------------------------------------------------
1 | {}
2 |
--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 | content: ["/index.html", "./src/**/*.{ts,tsx}"],
4 | theme: {
5 | extend: {},
6 | },
7 | plugins: [],
8 | };
9 |
--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "composite": true,
4 | "skipLibCheck": true,
5 | "module": "ESNext",
6 | "moduleResolution": "bundler",
7 | "allowSyntheticDefaultImports": true
8 | },
9 | "include": ["vite.config.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 | import App from "./App.tsx";
4 |
5 | ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
6 |
7 |
8 |
9 | );
10 |
--------------------------------------------------------------------------------
/.csb.json:
--------------------------------------------------------------------------------
1 | {
2 | "openFiles": ["src/App.tsx", "src/index.css"],
3 | "activeFile": "src/App.tsx",
4 | "template": "vite-react-ts",
5 | "options": {
6 | "tailwind": true
7 | },
8 | "dependencies": {
9 | "classnames": "latest",
10 | "react": "latest",
11 | "react-dom": "latest",
12 | "framer-motion": "^10.12.4"
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @layer base {
6 | :root {
7 | color: rgba(255, 255, 255, 0.87);
8 | background-color: #242424;
9 | }
10 |
11 | body {
12 | margin: 0;
13 | display: flex;
14 | justify-content: center;
15 | align-items: center;
16 | min-width: 320px;
17 | min-height: 100vh;
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React + TS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | env: { browser: true, es2020: true },
3 | extends: [
4 | 'eslint:recommended',
5 | 'plugin:@typescript-eslint/recommended',
6 | 'plugin:react-hooks/recommended',
7 | ],
8 | parser: '@typescript-eslint/parser',
9 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
10 | plugins: ['react-refresh'],
11 | rules: {
12 | 'react-refresh/only-export-components': 'warn',
13 | },
14 | }
15 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ESNext",
4 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
5 | "module": "ESNext",
6 | "skipLibCheck": true,
7 |
8 | /* Bundler mode */
9 | "moduleResolution": "bundler",
10 | "allowImportingTsExtensions": true,
11 | "resolveJsonModule": true,
12 | "isolatedModules": true,
13 | "noEmit": true,
14 | "jsx": "react-jsx",
15 |
16 | /* Linting */
17 | "strict": true,
18 | "noUnusedLocals": true,
19 | "noUnusedParameters": true,
20 | "noFallthroughCasesInSwitch": true
21 | },
22 | "include": ["src"],
23 | "references": [{ "path": "./tsconfig.node.json" }]
24 | }
25 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "framer-motion-like-animation",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "tsc && vite build",
9 | "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "framer-motion": "^10.12.4",
14 | "react": "^18.2.0",
15 | "react-dom": "^18.2.0"
16 | },
17 | "devDependencies": {
18 | "@types/react": "^18.0.28",
19 | "@types/react-dom": "^18.0.11",
20 | "@typescript-eslint/eslint-plugin": "^5.57.1",
21 | "@typescript-eslint/parser": "^5.57.1",
22 | "@vitejs/plugin-react": "^4.0.0",
23 | "autoprefixer": "^10.4.14",
24 | "eslint": "^8.38.0",
25 | "eslint-plugin-react-hooks": "^4.6.0",
26 | "eslint-plugin-react-refresh": "^0.3.4",
27 | "postcss": "^8.4.23",
28 | "prettier": "^2.8.8",
29 | "prettier-plugin-tailwindcss": "^0.2.7",
30 | "tailwindcss": "^3.3.2",
31 | "typescript": "^5.0.2",
32 | "vite": "^4.3.2"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Amazing Button Click Animation With Framer Motion's New Animation Sequences
2 |
3 | 
4 |
5 |
6 | In this video we'll be creating an awesome animated button with Framer Motion. A button similar to for example Twitter's like animation. In our case the button has a star sparkle effect animates the text letter by letter when it's being clicked.
7 |
8 | For this we'll be using Framer Motions new and powerful animation sequences – a tool that makes it really easy to create timelines within your animations. These timelines then make it super easy to make animations dependent on each other / happen at certain times.
9 |
10 | ## Links
11 |
12 | * [Live demo & playground](https://www.frontend.fyi/v/framer-motion-like-animation) of what we've build.
13 | * [Watch Video on YouTube](https://youtu.be/BDLXUEefqNk)
14 |
15 | ## Source code
16 |
17 | * HTML and JavaScript part can be found in [/src/app.tsx](/src/App.tsx)
18 | * The styling part can be used in [/src/index.css](/src/index.css)
19 |
20 | ## Tools used
21 |
22 | React, TypeScript, Framer Motion, Tailwind.
--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
1 | import { stagger, useAnimate, animate } from "framer-motion";
2 | import "./index.css";
3 |
4 | const randomNumberBetween = (min: number, max: number) => {
5 | return Math.floor(Math.random() * (max - min + 1) + min);
6 | };
7 |
8 | type AnimationSequence = Parameters[0];
9 |
10 | function App() {
11 | const [scope, animate] = useAnimate();
12 |
13 | const onButtonClick = () => {
14 | const sparkles = Array.from({ length: 20 });
15 | const sparklesAnimation: AnimationSequence = sparkles.map((_, index) => [
16 | `.sparkle-${index}`,
17 | {
18 | x: randomNumberBetween(-100, 100),
19 | y: randomNumberBetween(-100, 100),
20 | scale: randomNumberBetween(1.5, 2.5),
21 | opacity: 1,
22 | },
23 | {
24 | duration: 0.4,
25 | at: "<",
26 | },
27 | ]);
28 |
29 | const sparklesFadeOut: AnimationSequence = sparkles.map((_, index) => [
30 | `.sparkle-${index}`,
31 | {
32 | opacity: 0,
33 | scale: 0,
34 | },
35 | {
36 | duration: 0.3,
37 | at: "<",
38 | },
39 | ]);
40 |
41 | const sparklesReset: AnimationSequence = sparkles.map((_, index) => [
42 | `.sparkle-${index}`,
43 | {
44 | x: 0,
45 | y: 0,
46 | },
47 | {
48 | duration: 0.000001,
49 | },
50 | ]);
51 |
52 | animate([
53 | ...sparklesReset,
54 | [".letter", { y: -32 }, { duration: 0.2, delay: stagger(0.05) }],
55 | ["button", { scale: 0.8 }, { duration: 0.1, at: "<" }],
56 | ["button", { scale: 1 }, { duration: 0.1 }],
57 | ...sparklesAnimation,
58 | [".letter", { y: 0 }, { duration: 0.000001 }],
59 | ...sparklesFadeOut,
60 | ]);
61 | };
62 |
63 | return (
64 |
65 |
101 |