Add framer motion
This commit is contained in:
1ilit
parent
58bafcfcaf
commit
df9a3f8089
39
package-lock.json
generated
39
package-lock.json
generated
@ -15,6 +15,7 @@
|
||||
"dexie": "^3.2.4",
|
||||
"dexie-react-hooks": "^1.1.7",
|
||||
"file-saver": "^2.0.5",
|
||||
"framer-motion": "^10.18.0",
|
||||
"html-to-image": "^1.11.11",
|
||||
"jsonschema": "^1.4.1",
|
||||
"jspdf": "^2.5.1",
|
||||
@ -563,6 +564,21 @@
|
||||
"react-dom": ">=16.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@emotion/is-prop-valid": {
|
||||
"version": "0.8.8",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
|
||||
"integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"@emotion/memoize": "0.7.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@emotion/memoize": {
|
||||
"version": "0.7.4",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
|
||||
"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/@esbuild/android-arm": {
|
||||
"version": "0.19.9",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.9.tgz",
|
||||
@ -3103,6 +3119,29 @@
|
||||
"url": "https://github.com/sponsors/rawify"
|
||||
}
|
||||
},
|
||||
"node_modules/framer-motion": {
|
||||
"version": "10.18.0",
|
||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.18.0.tgz",
|
||||
"integrity": "sha512-oGlDh1Q1XqYPksuTD/usb0I70hq95OUzmL9+6Zd+Hs4XV0oaISBa/UUMSjYiq6m8EUF32132mOJ8xVZS+I0S6w==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.4.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@emotion/is-prop-valid": "^0.8.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/fs.realpath": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
"dexie": "^3.2.4",
|
||||
"dexie-react-hooks": "^1.1.7",
|
||||
"file-saver": "^2.0.5",
|
||||
"framer-motion": "^10.18.0",
|
||||
"html-to-image": "^1.11.11",
|
||||
"jsonschema": "^1.4.1",
|
||||
"jspdf": "^2.5.1",
|
||||
|
||||
30
src/animations/Reveal.jsx
Normal file
30
src/animations/Reveal.jsx
Normal file
@ -0,0 +1,30 @@
|
||||
import { useRef, useEffect } from "react";
|
||||
import { motion, useInView, useAnimation } from "framer-motion";
|
||||
|
||||
export default function Reveal({ children }) {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true });
|
||||
const mainControls = useAnimation();
|
||||
|
||||
useEffect(() => {
|
||||
if (isInView) {
|
||||
mainControls.start("visible");
|
||||
}
|
||||
}, [isInView, mainControls]);
|
||||
|
||||
return (
|
||||
<div ref={ref}>
|
||||
<motion.div
|
||||
variants={{
|
||||
hidden: { opacity: 0, y: 75 },
|
||||
visible: { opacity: 1, y: 0 },
|
||||
}}
|
||||
initial="hidden"
|
||||
animate={mainControls}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -4,6 +4,8 @@ import { IconCrossStroked } from "@douyinfe/semi-icons";
|
||||
import SimpleCanvas from "../components/SimpleCanvas"
|
||||
import Navbar from "../components/Navbar";
|
||||
import { diagram } from "../data/heroDiagram"
|
||||
import Reveal from "../animations/Reveal";
|
||||
|
||||
export default function LandingPage() {
|
||||
const [showSurvey, setShowSurvey] = useState(true);
|
||||
|
||||
@ -34,26 +36,32 @@ export default function LandingPage() {
|
||||
<SimpleCanvas diagram={diagram} zoom={0.85} />
|
||||
</div>
|
||||
<div className="absolute left-0 top-[50%] translate-y-[-50%] p-8 text-zinc-800 text-center">
|
||||
<div className="text-4xl font-bold tracking-wide">
|
||||
<h1 className="py-1 bg-gradient-to-r from-slate-700 from-10% via-slate-500 to-slate-700 inline-block text-transparent bg-clip-text">
|
||||
Draw, Copy, and Paste
|
||||
</h1>
|
||||
</div>
|
||||
<div className="text-lg font-semibold mt-3">
|
||||
Free, simple, and intuitive database design tool and SQL generator.
|
||||
</div>
|
||||
<Reveal>
|
||||
<div className="text-4xl font-bold tracking-wide">
|
||||
<h1 className="py-1 bg-gradient-to-r from-slate-700 from-10% via-slate-500 to-slate-700 inline-block text-transparent bg-clip-text">
|
||||
Draw, Copy, and Paste
|
||||
</h1>
|
||||
</div>
|
||||
<div className="text-lg font-semibold mt-3">
|
||||
Free, simple, and intuitive database design tool and SQL generator.
|
||||
</div>
|
||||
</Reveal>
|
||||
<div className="mt-4 flex gap-4 justify-center font-semibold">
|
||||
<button className="bg-white shadow-lg px-9 py-2 rounded border border-zinc-200 hover:bg-zinc-100">
|
||||
<button className="bg-white shadow-lg px-9 py-2 rounded border border-zinc-200 hover:bg-zinc-100 transition-all duration-200" onClick={() => document
|
||||
.getElementById("learn-more")
|
||||
.scrollIntoView({ behavior: "smooth" })}>
|
||||
Learn more
|
||||
</button>
|
||||
<Link to="/editor" className="bg-slate-700 text-white px-4 py-2 rounded shadow-lg hover:bg-slate-600">
|
||||
<Link to="/editor" className="bg-slate-700 text-white px-4 py-2 rounded shadow-lg hover:bg-slate-600 transition-all duration-200">
|
||||
Try it for yourself
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>hi</div>
|
||||
<div id="learn-more">
|
||||
more stuff
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user