diff --git a/package.json b/package.json index 3235e0751946a7d8719aaef1bb808add92acd5e8..d38d2ed21f5307076c5367654233266fa146c791 100644 --- a/package.json +++ b/package.json @@ -13,11 +13,13 @@ "dependencies": { "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", + "@gsap/react": "^2.1.1", "@mui/lab": "^5.0.0-alpha.170", "@mui/material": "^5.15.21", "@popperjs/core": "^2.11.8", "bootstrap": "^5.3.3", "d3": "^7.9.0", + "gsap": "^3.12.5", "react": "^18.2.0", "react-bootstrap": "^2.10.2", "react-d3-library": "^1.0.4", diff --git a/src/contents/description.tsx b/src/contents/description.tsx index dcc1205daaf09d03915b57ade24279435748799f..d44b30bc4c5ad4931593ad1fa38fe126149addf0 100644 --- a/src/contents/description.tsx +++ b/src/contents/description.tsx @@ -1,5 +1,6 @@ import { H2 } from "../components/headings"; import { Circle } from "../components/Shapes"; +import "../utils/text.js"; export function Description() { diff --git a/src/utils/text.js b/src/utils/text.js index 1f615fae7271d2c99c0a8d13003943c1f93d0ff1..a726dcbd3a32f2559e934439cb0a5e58728c31e1 100644 --- a/src/utils/text.js +++ b/src/utils/text.js @@ -1,4 +1,6 @@ import { gsap } from "gsap"; +import ScrollTrigger from "gsap/ScrollTrigger"; + gsap.registerPlugin(ScrollTrigger); // REVEAL // @@ -7,7 +9,7 @@ gsap.utils.toArray(".revealUp").forEach(function (elem) { trigger: elem, start: "top 80%", end: "bottom 20%", - markers: true, + markers: true, onEnter: function () { gsap.fromTo( elem, diff --git a/yarn.lock b/yarn.lock index 84f7583821fe743b5ae5dad3d1c5571018d79139..d25f9c3a597545a864f56b19cd2e019a1259fe1c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -497,6 +497,14 @@ resolved "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.3.tgz" integrity sha512-XGndio0l5/Gvd6CLIABvsav9HHezgDFFhDfHk1bvLfr9ni8dojqLSvBbotJEjmIwNHL7vK4QzBJTdBRoB+c1ww== +"@gsap/react@^2.1.1": + version "2.1.1" + resolved "https://registry.yarnpkg.com/@gsap/react/-/react-2.1.1.tgz#219a81c84f93a2631c8aa324c0f5cce03cdf2ed9" + integrity sha512-apGPRrmpqxvl1T6Io1KgT8tFU+IuACI6z4zmT7t8+PASserJeLVRFJdSNUFA2Xb/eVkZI1noE8LIrY/w/oJECw== + dependencies: + gsap "^3.12.5" + react ">=16" + "@humanwhocodes/config-array@^0.11.14": version "0.11.14" resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz" @@ -3574,6 +3582,11 @@ graphemer@^1.4.0: resolved "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz" integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag== +gsap@^3.12.5: + version "3.12.5" + resolved "https://registry.yarnpkg.com/gsap/-/gsap-3.12.5.tgz#136c02dad4c673b441bdb1ca00104bfcb4eae7f4" + integrity sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ== + has-ansi@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz" @@ -4864,6 +4877,13 @@ react-transition-group@^4.3.0, react-transition-group@^4.4.5: loose-envify "^1.4.0" prop-types "^15.6.2" +react@>=16, react@^18.2.0: + version "18.3.1" + resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz" + integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ== + dependencies: + loose-envify "^1.1.0" + react@^15.0.2: version "15.7.0" resolved "https://registry.npmjs.org/react/-/react-15.7.0.tgz" @@ -4875,13 +4895,6 @@ react@^15.0.2: object-assign "^4.1.0" prop-types "^15.5.10" -react@^18.2.0: - version "18.3.1" - resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz" - integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ== - dependencies: - loose-envify "^1.1.0" - readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.3.6: version "2.3.8" resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz"