Remix.run like Homepage Animation

Final Result 🎉

Just scrolling up and down going on here 👇🏻

TLDR 🥱!!!

All you need is this 🎉 :-

   // bcr = boundingClientRect, shortened for brevity
const bcr = containerDivElement.getBoundingClientRect();
const counter = 1 - (bcr.bottom / bcr.height);

Like seriously, if you calculate a new counter every time the user scrolls, you can use it to create magical animations.
This counter value goes from 0 to 1 as the user scrolls from the top to the bottom of the container.

But How Does it Work? 🤔

Sing along with me 🎶,

🤩 I came across this animation on remix.run website,
✍🏻 It looked so cool, I turned my pc on and soon started to write,
💩 The sh*t code and the good code, I tried coding it all,
🤫 Eventually I found the secret that I’m about tell you all,

📦 We kick off with a container <div />, and here’s the code for that,
🙂 I’m using Svelte here, but sure you can use React ,

   // for React, use `useRef` hook, <div ref={containerRef} />
<div bind:this={containerRef} style="height: 400vh;">
  <slot {containerVisible} {counter} />
</div>

🏢 This little snippet creates a <div /> that’s super super tall (400vh),
🎰 And your content goes inside of it, that’s why we used a <slot />

<slot /> in Svelte is same as {children} in React

📜 Now, we just need to calculate the counter when user scrolls,
🥁 And here’s the code to do that, just gimme a drum roll,

   // same as useLayoutEffect for React
afterUpdate(() => {
  // the fu#k's this 👇🏻, right? 🤔
  if (!containerVisible) return;
  
  const bcr = containerRef.getBoundingClientRect();
  const ratio = bcr.bottom / bcr.height;
  const counter = 1 - (
    ratio < 0 ? 0 : 
      ratio > 1 ? 1 : 
        ratio
    );
});

✋🏻 But Wait, What’s the deal with that containerVisible in there?

🤭 It’s just a basic bool, updates when container’s in viewport,
😃 It’s true when you see it, 😔 and false when you don’t,

🧩 And we use Intersection Observer API for doing that,
⚛️ And here’s the code for it, should also works in the React,

   // use a `useState` hook for React
let intersectionObserver: IntersectionObserver;
  
// same as `useLayoutEffect` for React
afterUpdate(() => {
  intersectionObserver = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        containerVisible = true;
      } else {
        containerVisible = false;
      }
    });
  });
  intersectionObserver.observe(containerRef);
});
  
// same as `useEffect`'s cleanup for React
onDestroy(() => {
  intersectionObserver && intersectionObserver.disconnect();
});

🔔 But wait, there’s one more thing, a vital part indeed,
🏃🏻‍♂️ A re-render trigger, to fulfill our animation need,

📜 As the use scrolls down, we have to force a re-render,
🦴 Let’s add a state variable, we’ll call it justToRerender,

📜 Bind onScroll to the <body />, let animation dwell,
🙏🏻 It updates as user scroll’s, through heaven or through hell,

   // this is just a `useState` for React
let justToRerender: number = 0;
  
// for React, use `useEffect` along with `document.addEventListener`
<svelte:window
  on:scroll={() => {
    justToRerender = window.scrollY;
  }}
/>

📜 Now whenever the user scrolls, the justToRerender changes,
😮‍💨 And don’t sweat it, use this trick, there are no dangers,

⌚ Now counter goes through 0 to 1 as the user scrolls down,
🎉 We use this to create animations, that’s how we win the crown,

Let’s Animate 💃🏻

😇 It’s simple, super simple actually, now that we have that counter,
🎨 We can use it to animate anything, and I mean anything we encounter,

🎭 Here’s a simple example, let’s animate the scale & opacity,
🎭 Like a painter with a brush, crafting with ferocity,

   <Container
  let:counter
  let:containerVisible
>
  {#if containerVisible}
    <div
      style="
        position: sticky;
        top: 50vh;
        opacity: {counter};
        transform: scale({counter + 0.3})
      "
    >
      C🌽rnHub
    </div>
  {/if}
</Container>

🎉 And that’s it, … we’re finally done,
🎈 And now you can also create animations that are super duper fun.

Full Working Code (Svelte) 📜

I’ve used TailwindCSS for styling, and I’ve not removed it here from the code, so that if you copy-paste this, it’ll look exactly like the final result.

Container (Svelte)

   <script lang="ts">
  import { afterUpdate, onDestroy } from "svelte";
  import type { HTMLAttributes } from "svelte/elements";
  
  interface Props extends HTMLAttributes<HTMLDivElement> {}
  const { class: svelteClass, ...props } = $$restProps;
  
  let containerRef: HTMLDivElement;
  
  let justToRerender: number = 0;
  let intersectionObserver: IntersectionObserver;
  export let containerVisible: boolean = false;
  // gradually goes from 0 to 1 as user scrolls down
  // might not work as expected, if the container is the bottom most element in the page
  // in this case, use an offset value to adjust the counter
  export let counter: number = 0;
  
  // calculate counter
  afterUpdate(() => {
    if (!containerVisible) return;
  
    const ratio =
      containerRef.getBoundingClientRect().bottom /
      containerRef.getBoundingClientRect().height;
    counter = 1 - (ratio < 0 ? 0 : ratio > 1 ? 1 : ratio);
  });
  
  // Intersection Observer API
  afterUpdate(() => {
    intersectionObserver = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          containerVisible = true;
        } else {
          containerVisible = false;
        }
      });
    });
    intersectionObserver.observe(containerRef);
  });
  
  onDestroy(() => {
    intersectionObserver && intersectionObserver.disconnect();
  });
</script>
  
<svelte:window
  on:scroll={() => {
    justToRerender = window.scrollY;
  }}
/>
  
<div
  class={`w-full h-[400vh] ${svelteClass}`}
  {...props}
  bind:this={containerRef}
>
  <slot {containerVisible} {counter} />
</div>

Using Container (Svelte)

   <script lang="ts">
  import Container from "./container.svelte";
</script>
  
<Container
  let:counter
  let:containerVisible
  class="flex justify-center items-center bg-gradient-to-b from-gray-950 via-amber-900 to-gray-950"
>
  {#if containerVisible}
    <div
      class="sticky top-[45vh] py-20 w-96 aspect-square flex justify-center bg-black shadow-2xl shadow-amber-600 rounded-lg"
      style=" 
        opacity: {counter};
        transform: scale({counter + 0.3})
        "
      >
        C🌽rnHub 
    </div>
  {/if}
</Container>

Full Working Code (React) 📜

To be updated soon…

Thanks 🤗 for reading all the way till down here. Please consider subscribing(click) (tap) and check out some other stuff I wrote below 👇🏻