From 9e8a5032e0ea108b46a6f2bfc104542c11f3d52d Mon Sep 17 00:00:00 2001 From: Julian Benegas Date: Tue, 10 Oct 2023 14:07:03 +0200 Subject: [PATCH 1/2] video --- .../src/app/sections/falling-caps/index.tsx | 18 +----------------- website/src/app/sections/hero/index.tsx | 2 +- .../app/sections/horizontal-marquee/index.tsx | 2 +- .../app/sections/lab-cylinder/intro/index.tsx | 2 +- 4 files changed, 4 insertions(+), 20 deletions(-) diff --git a/website/src/app/sections/falling-caps/index.tsx b/website/src/app/sections/falling-caps/index.tsx index b1be492..8ceeda1 100644 --- a/website/src/app/sections/falling-caps/index.tsx +++ b/website/src/app/sections/falling-caps/index.tsx @@ -6,7 +6,6 @@ import s from "./falling-caps.module.scss"; import { CapsModel } from "./caps"; import { Canvas } from "@react-three/fiber"; import { useMemo } from "react"; -import { getTimeline } from "../../../lib/utils"; const splitText = (text: string, wordClass?: string) => { const wordsArray = text.split(" "); @@ -45,23 +44,8 @@ export const FallingCaps = () => { [] ); - const perWordTimeline = useMemo( - () => - getTimeline({ - start: 0, - end: 50, - /* Chunk per word */ - chunks: splittedText.length, - overlap: 0.7, - }), - [splittedText] - ); - return ( - +
diff --git a/website/src/app/sections/hero/index.tsx b/website/src/app/sections/hero/index.tsx index e04e690..b3f9bb1 100644 --- a/website/src/app/sections/hero/index.tsx +++ b/website/src/app/sections/hero/index.tsx @@ -15,7 +15,7 @@ export const Hero = () => { return ( { return (
diff --git a/website/src/app/sections/lab-cylinder/intro/index.tsx b/website/src/app/sections/lab-cylinder/intro/index.tsx index 1d129b1..44edd55 100644 --- a/website/src/app/sections/lab-cylinder/intro/index.tsx +++ b/website/src/app/sections/lab-cylinder/intro/index.tsx @@ -9,7 +9,7 @@ export const LabIntro = () => { start="top bottom" end="bottom top" scrub={1.1} - // debug={{ label: "lab intro" }} + debug={{ label: "Lab Intro" }} >
Date: Tue, 10 Oct 2023 16:13:07 +0200 Subject: [PATCH 2/2] m --- .../visualizer/visualizer.module.scss | 13 ++++++++++++ .../src/app/components/cyllinder/index.tsx | 12 +++++------ website/src/app/sections/footer/index.tsx | 5 +---- .../src/app/sections/hero/hero.module.scss | 2 ++ website/src/app/sections/hero/index.tsx | 20 +++++++++++++++++++ .../src/app/sections/last-parallax/index.tsx | 2 +- 6 files changed, 42 insertions(+), 12 deletions(-) diff --git a/scrollytelling/src/components/debugger/visualizer/visualizer.module.scss b/scrollytelling/src/components/debugger/visualizer/visualizer.module.scss index a5d0263..1b5e1a0 100644 --- a/scrollytelling/src/components/debugger/visualizer/visualizer.module.scss +++ b/scrollytelling/src/components/debugger/visualizer/visualizer.module.scss @@ -27,6 +27,8 @@ visibility: hidden; color: var(--color-white); + animation: fade-in 1s ease-out forwards; + &.initialized { visibility: visible; } @@ -219,6 +221,17 @@ } } +@keyframes fade-in { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0px); + } +} + .tween { --duration-percentage: 0; --start-offset-percentage: 0; diff --git a/website/src/app/components/cyllinder/index.tsx b/website/src/app/components/cyllinder/index.tsx index a454348..b403054 100644 --- a/website/src/app/components/cyllinder/index.tsx +++ b/website/src/app/components/cyllinder/index.tsx @@ -5,9 +5,8 @@ import Image from "next/image"; import s from "./cyllinder.module.scss"; import clsx from "clsx"; -import { defaultConfig, useMapToCylinder } from "./helpers"; +import { useMapToCylinder } from "./helpers"; import { Experiment } from "../../../lib/types"; -import { useMedia } from "../../../hooks/use-media"; import Link from "next/link"; import { useViewportSize } from "~/hooks/use-viewport"; @@ -22,8 +21,7 @@ const itemsInViewAtOnce = 7; const itemsPadding = 4; export const Cyllinder: React.FC = ({ experiments }) => { - const { height, aspect } = useViewportSize(); - const isMobileSize = useMedia("(max-width: 768px)"); + const { height } = useViewportSize(); const pinSpacerHeight = `calc(3 * ${itemHeight} * ${ Math.max(itemsInViewAtOnce, experiments.length) + itemsPadding })`; @@ -51,9 +49,9 @@ export const Cyllinder: React.FC = ({ experiments }) => { callbacks={{ onRefresh: () => update(progress.value), }} - // debug={{ - // label: "cylinder", - // }} + debug={{ + label: "Cylinder", + }} >
{ const isDesktopSm = useMedia("(min-width: 1024px)"); return ( - +