Skip to content

Commit

Permalink
Merge pull request #70 from basementstudio/crolo-change
Browse files Browse the repository at this point in the history 
Change anim root in debugger on scroll
  • Loading branch information
@julianbenegas
julianbenegas authored Nov 27, 2023
2 parents 3edb565 + 7b5128d commit 0810e3b
Show file tree
Hide file tree
Showing 3 changed files with 74 additions and 120 deletions.
5 changes: 5 additions & 0 deletions .changeset/lucky-files-exist.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@bsmnt/scrollytelling": patch
---

Make visualizer focus on active Scrollytelling as you scroll.
97 changes: 67 additions & 30 deletions scrollytelling/src/components/debugger/visualizer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,9 +66,8 @@ const Tween = ({
.targets()
.map((t: any) => {
if (t instanceof SVGElement || t instanceof HTMLElement) {
return `${t.tagName.toLocaleLowerCase()}${t.id ? `#${t.id}` : ""}${
t.classList.length ? "." + t.classList[0] : ""
}`;
return `${t.tagName.toLocaleLowerCase()}${t.id ? `#${t.id}` : ""}${t.classList.length ? "." + t.classList[0] : ""
}`;
}

if (t instanceof Object) {
Expand Down Expand Up @@ -276,9 +275,39 @@ export const Visualizer = () => {
const [dismiss, setDismiss] = useState(false);
const [minimize, setMinimize] = useState(false);
const [initialized, setInitialized] = useState(false);

const [scrollTop, setScrollTop] = useState<number>();
const [isUserScroll, setIsUserScroll] = useState(true);
const root = roots.find((r) => r.id === selectedRoot) ?? roots[0];


useEffect(() => {
if (!isUserScroll) return;

const onScroll = () => {
setScrollTop(window.scrollY);
};

window.addEventListener("scroll", onScroll);

const activeRoot = roots.find((r) => {
const progress = r?.tween?.progress() as number;
const roundedProgress = Math.round(progress * 100) / 100

return roundedProgress !== undefined &&
(roundedProgress > 0 && roundedProgress < 1);
}
);

if (!activeRoot) return;

setSelectedRoot(activeRoot.id);

return () => {
window.removeEventListener("scroll", onScroll);
}

}, [isUserScroll, roots, scrollTop]);

useEffect(() => {
const handleUpdate = () => {
const progress = root?.tween?.progress();
Expand Down Expand Up @@ -465,34 +494,42 @@ export const Visualizer = () => {
</Select>
<div className={s['actions']}>

<button
className={clsx(s["button"], s["scrollToRoot"])}
onClick={() => {
const triggerElement = root?.tween?.scrollTrigger?.trigger;
if (triggerElement) {
triggerElement.scrollIntoView({ behavior: "smooth" });
}
}}
>
<svg
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
<button
className={clsx(s["button"], s["scrollToRoot"])}
onClick={() => {
const triggerElement = root?.tween?.scrollTrigger?.trigger;
if (triggerElement) {
setIsUserScroll(false);

setTimeout(() => {
setIsUserScroll(true);
}
, 1500);

triggerElement.scrollIntoView({
behavior: "smooth" });
}
}}
>
<path
d="M10.875 6.00004L6.398 1.52254C6.178 1.30304 5.822 1.30304 5.6025 1.52254L1.125 6.00004M9.75 4.87504V9.93754C9.75 10.248 9.498 10.5 9.1875 10.5H7.125V8.06254C7.125 7.75204 6.873 7.50004 6.5625 7.50004H5.4375C5.127 7.50004 4.875 7.75204 4.875 8.06254V10.5H2.8125C2.502 10.5 2.25 10.248 2.25 9.93754V4.87504M7.875 10.5H3.75"
stroke="white"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<svg
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.875 6.00004L6.398 1.52254C6.178 1.30304 5.822 1.30304 5.6025 1.52254L1.125 6.00004M9.75 4.87504V9.93754C9.75 10.248 9.498 10.5 9.1875 10.5H7.125V8.06254C7.125 7.75204 6.873 7.50004 6.5625 7.50004H5.4375C5.127 7.50004 4.875 7.75204 4.875 8.06254V10.5H2.8125C2.502 10.5 2.25 10.248 2.25 9.93754V4.87504M7.875 10.5H3.75"
stroke="white"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>

<span className={s['text']}>
SCROLL TO ROOT
</span>
</button>
<span className={s['text']}>
SCROLL TO ROOT
</span>
</button>
</div>
</div>

Expand Down
92 changes: 2 additions & 90 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -591,11 +591,6 @@
dependencies:
webpack-bundle-analyzer "4.7.0"

"@next/[email protected]":
version "13.3.0"
resolved "https://registry.npmjs.org/@next/env/-/env-13.3.0.tgz"
integrity sha512-AjppRV4uG3No7L1plinoTQETH+j2F10TEnrMfzbTUYwze5sBUPveeeBAPZPm8OkJZ1epq9OyYKhZrvbD6/9HCQ==

"@next/[email protected]":
version "13.5.6"
resolved "https://registry.yarnpkg.com/@next/env/-/env-13.5.6.tgz#c1148e2e1aa166614f05161ee8f77ded467062bc"
Expand All @@ -608,91 +603,46 @@
dependencies:
glob "7.1.7"

"@next/[email protected]":
version "13.3.0"
resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.3.0.tgz#38f18e0639cd4c7edc6a38d4b83fe00f38eea4f2"
integrity sha512-DmIQCNq6JtccLPPBzf0dgh2vzMWt5wjxbP71pCi5EWpWYE3MsP6FcRXi4MlAmFNDQOfcFXR2r7kBeG1LpZUh1w==

"@next/[email protected]":
version "13.5.6"
resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.6.tgz#b15d139d8971360fca29be3bdd703c108c9a45fb"
integrity sha512-5nvXMzKtZfvcu4BhtV0KH1oGv4XEW+B+jOfmBdpFI3C7FrB/MfujRpWYSBBO64+qbW8pkZiSyQv9eiwnn5VIQA==

"@next/[email protected]":
version "13.3.0"
resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.3.0.tgz#b670ed1fd1d231aa21279173ec52e3ad56dc6aeb"
integrity sha512-oQoqFa88OGgwnYlnAGHVct618FRI/749se0N3S8t9Bzdv5CRbscnO0RcX901+YnNK4Q6yeiizfgO3b7kogtsZg==

"@next/[email protected]":
version "13.5.6"
resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.6.tgz#9c72ee31cc356cb65ce6860b658d807ff39f1578"
integrity sha512-6cgBfxg98oOCSr4BckWjLLgiVwlL3vlLj8hXg2b+nDgm4bC/qVXXLfpLB9FHdoDu4057hzywbxKvmYGmi7yUzA==

"@next/[email protected]":
version "13.3.0"
resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.3.0.tgz#b114935f6b4c94c123f6cac55a4823d483209ba5"
integrity sha512-Wzz2p/WqAJUqTVoLo6H18WMeAXo3i+9DkPDae4oQG8LMloJ3if4NEZTnOnTUlro6cq+S/W4pTGa97nWTrOjbGw==

"@next/[email protected]":
version "13.5.6"
resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.6.tgz#59f5f66155e85380ffa26ee3d95b687a770cfeab"
integrity sha512-txagBbj1e1w47YQjcKgSU4rRVQ7uF29YpnlHV5xuVUsgCUf2FmyfJ3CPjZUvpIeXCJAoMCFAoGnbtX86BK7+sg==

"@next/[email protected]":
version "13.3.0"
resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.3.0.tgz#67a57309f8761c7d00d629d6785d56ed0567a0d2"
integrity sha512-xPVrIQOQo9WXJYgmoTlMnAD/HlR/1e1ZIWGbwIzEirXBVBqMARUulBEIKdC19zuvoJ477qZJgBDCKtKEykCpyQ==

"@next/[email protected]":
version "13.5.6"
resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.6.tgz#f012518228017052736a87d69bae73e587c76ce2"
integrity sha512-cGd+H8amifT86ZldVJtAKDxUqeFyLWW+v2NlBULnLAdWsiuuN8TuhVBt8ZNpCqcAuoruoSWynvMWixTFcroq+Q==

"@next/[email protected]":
version "13.3.0"
resolved "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.3.0.tgz"
integrity sha512-jOFlpGuPD7W2tuXVJP4wt9a3cpNxWAPcloq5EfMJRiXsBBOjLVFZA7boXYxEBzSVgUiVVr1V9T0HFM7pULJ1qA==

"@next/[email protected]":
version "13.5.6"
resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.6.tgz#339b867a7e9e7ee727a700b496b269033d820df4"
integrity sha512-Mc2b4xiIWKXIhBy2NBTwOxGD3nHLmq4keFk+d4/WL5fMsB8XdJRdtUlL87SqVCTSaf1BRuQQf1HvXZcy+rq3Nw==

"@next/[email protected]":
version "13.3.0"
resolved "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.3.0.tgz"
integrity sha512-2OwKlzaBgmuet9XYHc3KwsEilzb04F540rlRXkAcjMHL7eCxB7uZIGtsVvKOnQLvC/elrUegwSw1+5f7WmfyOw==

"@next/[email protected]":
version "13.5.6"
resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.6.tgz#ae0ae84d058df758675830bcf70ca1846f1028f2"
integrity sha512-CFHvP9Qz98NruJiUnCe61O6GveKKHpJLloXbDSWRhqhkJdZD2zU5hG+gtVJR//tyW897izuHpM6Gtf6+sNgJPQ==

"@next/[email protected]":
version "13.3.0"
resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.3.0.tgz#0c209aa35d1c88b01e78259a89cd68f4139b5093"
integrity sha512-OeHiA6YEvndxT46g+rzFK/MQTfftKxJmzslERMu9LDdC6Kez0bdrgEYed5eXFK2Z1viKZJCGRlhd06rBusyztA==

"@next/[email protected]":
version "13.5.6"
resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.6.tgz#a5cc0c16920485a929a17495064671374fdbc661"
integrity sha512-aFv1ejfkbS7PUa1qVPwzDHjQWQtknzAZWGTKYIAaS4NMtBlk3VyA6AYn593pqNanlicewqyl2jUhQAaFV/qXsg==

"@next/[email protected]":
version "13.3.0"
resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.3.0.tgz#52ae74da1dd6d840c3743923367d27ed013803dd"
integrity sha512-4aB7K9mcVK1lYEzpOpqWrXHEZympU3oK65fnNcY1Qc4HLJFLJj8AViuqQd4jjjPNuV4sl8jAwTz3gN5VNGWB7w==

"@next/[email protected]":
version "13.5.6"
resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.6.tgz#6a2409b84a2cbf34bf92fe714896455efb4191e4"
integrity sha512-XqqpHgEIlBHvzwG8sp/JXMFkLAfGLqkbVsyN+/Ih1mR8INb6YCc2x/Mbwi6hsAgUnqQztz8cvEbHJUbSl7RHDg==

"@next/[email protected]":
version "13.3.0"
resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.3.0.tgz#db7b55fee834dc8c2c484c696469e65bae2ee770"
integrity sha512-Reer6rkLLcoOvB0dd66+Y7WrWVFH7sEEkF/4bJCIfsSKnTStTYaHtwIJAwbqnt9I392Tqvku0KkoqZOryWV9LQ==

"@next/[email protected]":
version "13.5.6"
resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.6.tgz#4a3e2a206251abc729339ba85f60bc0433c2865d"
Expand Down Expand Up @@ -1055,13 +1005,6 @@
resolved "https://registry.npmjs.org/@stitches/react/-/react-1.2.8.tgz"
integrity sha512-9g9dWI4gsSVe8bNLlb+lMkBYsnIKCZTmvqvDG+Avnn69XfmHZKiaMrx7cgTaddq7aTPPmXiTsbFcUy0xgI4+wA==

"@swc/[email protected]":
version "0.4.14"
resolved "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz"
integrity sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==
dependencies:
tslib "^2.4.0"

"@swc/[email protected]":
version "0.5.2"
resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.2.tgz#85ea0c76450b61ad7d10a37050289eded783c27d"
Expand Down Expand Up @@ -5303,7 +5246,7 @@ mz@^2.7.0:
object-assign "^4.0.1"
thenify-all "^1.0.0"

nanoid@^3.3.4, nanoid@^3.3.6:
nanoid@^3.3.6:
version "3.3.6"
resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz"
integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
Expand Down Expand Up @@ -5338,7 +5281,7 @@ next-themes@^0.2.1:
resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.2.1.tgz#0c9f128e847979daf6c67f70b38e6b6567856e45"
integrity sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==

next@^13.0.6:
next@^13.0.6, next@^13.3.0:
version "13.5.6"
resolved "https://registry.yarnpkg.com/next/-/next-13.5.6.tgz#e964b5853272236c37ce0dd2c68302973cf010b1"
integrity sha512-Y2wTcTbO4WwEsVb4A8VSnOsG1I9ok+h74q0ZdxkwM3EODqrs4pasq7O0iUxbcS9VtWMicG7f3+HAj0r1+NtKSw==
Expand All @@ -5361,28 +5304,6 @@ next@^13.0.6:
"@next/swc-win32-ia32-msvc" "13.5.6"
"@next/swc-win32-x64-msvc" "13.5.6"

next@^13.3.0:
version "13.3.0"
resolved "https://registry.npmjs.org/next/-/next-13.3.0.tgz"
integrity sha512-OVTw8MpIPa12+DCUkPqRGPS3thlJPcwae2ZL4xti3iBff27goH024xy4q2lhlsdoYiKOi8Kz6uJoLW/GXwgfOA==
dependencies:
"@next/env" "13.3.0"
"@swc/helpers" "0.4.14"
busboy "1.6.0"
caniuse-lite "^1.0.30001406"
postcss "8.4.14"
styled-jsx "5.1.1"
optionalDependencies:
"@next/swc-darwin-arm64" "13.3.0"
"@next/swc-darwin-x64" "13.3.0"
"@next/swc-linux-arm64-gnu" "13.3.0"
"@next/swc-linux-arm64-musl" "13.3.0"
"@next/swc-linux-x64-gnu" "13.3.0"
"@next/swc-linux-x64-musl" "13.3.0"
"@next/swc-win32-arm64-msvc" "13.3.0"
"@next/swc-win32-ia32-msvc" "13.3.0"
"@next/swc-win32-x64-msvc" "13.3.0"

nextra-theme-docs@latest:
version "2.13.2"
resolved "https://registry.yarnpkg.com/nextra-theme-docs/-/nextra-theme-docs-2.13.2.tgz#7f0c2bdd83d8866201775edd654398417a564878"
Expand Down Expand Up @@ -5838,15 +5759,6 @@ postcss-value-parser@^4.1.0:
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==

[email protected]:
version "8.4.14"
resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz"
integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
dependencies:
nanoid "^3.3.4"
picocolors "^1.0.0"
source-map-js "^1.0.2"

[email protected]:
version "8.4.31"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
Expand Down

2 comments on commit 0810e3b

@vercel
Copy link

@vercel vercel bot commented on 0810e3b Nov 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

scrollytelling-docs – ./docs

scrollytelling-docs-git-main-basement.vercel.app
scrollytelling-docs-three.vercel.app
scrollytelling-docs-basement.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 0810e3b Nov 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

scrollytelling-website – ./website

scrollytelling-website-git-main-basement.vercel.app
scrollytelling-website.vercel.app
scrollytelling-website-basement.vercel.app
scrollytelling.basement.studio

Please sign in to comment.