diff --git a/package-lock.json b/package-lock.json index 2b85db4..fab9406 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "@testing-library/user-event": "^14.5.2", "axios": "^1.7.3", "firebase": "^10.12.4", + "framer-motion": "^11.3.24", "lottie-react": "^2.4.0", "mdn-data": "^2.9.0", "react": "^18.0.0", @@ -9703,6 +9704,30 @@ "url": "https://github.com/sponsors/rawify" } }, + "node_modules/framer-motion": { + "version": "11.3.24", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.3.24.tgz", + "integrity": "sha512-kl0YI7HwAtyV0VOAWuU/rXoOS8+z5qSkMN6rZS+a9oe6fIha6SC3vjJN6u/hBpvjrg5MQNdSnqnjYxm0WYTX9g==", + "dependencies": { + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", diff --git a/package.json b/package.json index 3cfe179..77a9dcd 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@testing-library/user-event": "^14.5.2", "axios": "^1.7.3", "firebase": "^10.12.4", + "framer-motion": "^11.3.24", "lottie-react": "^2.4.0", "mdn-data": "^2.9.0", "react": "^18.0.0", diff --git a/src/Components/Contributors.js b/src/Components/Contributors.js index f095404..571c362 100644 --- a/src/Components/Contributors.js +++ b/src/Components/Contributors.js @@ -4,10 +4,14 @@ import { Link } from "react-router-dom"; import homeIcon from '../img/homeicon.png'; import axios from 'axios'; import './Contributors.css'; +import { color, motion } from "framer-motion"; function Contributors() { const [contributors, setContributors] = useState([]); - + const eventVariants = { + hidden: { opacity: 0, y: 40 }, + visible: { opacity: 1, y: 0 }, + }; useEffect(() => { async function fetchContributors() { try { @@ -30,7 +34,12 @@ function Contributors() {
{contributors.map((contributor) => ( -
+ Contributions: {contributor.contributions}

-
+ ))}