🗒️

Scroll Animation for Notion Sites (via Super, Potion, Notion API)

Notion-as-a-website is a real workflow — Super, Potion, and Simple.ink all turn Notion docs into public sites. Most of these tools support custom HTML injection, which means you can add scroll-driven animation to your Notion-published site without leaving the Notion ecosystem.

Manual Implementation

38 lines

// Manual scroll animation on Notion (via Super/Potion) — 47+ lines before mobile
const canvas = document.getElementById('scroll-canvas');
const ctx = canvas.getContext('2d');
const frames = [];
let currentFrame = 0;

async function preloadFrames(count) {
  await Promise.all(Array.from({ length: count }, (_, i) => {
    const img = new Image();
    const padded = String(i).padStart(4, '0');
    img.src = `https://your-cdn.com/frames/frame-${padded}.jpg`;
    frames.push(img);
    return new Promise((r) => { img.onload = r; img.onerror = r; });
  }));
}

function drawFrame(index) {
  if (!frames[index]) return;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(frames[index], 0, 0, canvas.width, canvas.height);
}

window.addEventListener('scroll', () => {
  const rect = canvas.parentElement.getBoundingClientRect();
  const scrolled = -rect.top;
  const total = rect.height - window.innerHeight;
  const progress = Math.max(0, Math.min(1, scrolled / total));
  const frameIndex = Math.floor(progress * (frames.length - 1));
  if (frameIndex !== currentFrame) {
    currentFrame = frameIndex;
    requestAnimationFrame(() => drawFrame(currentFrame));
  }
}, { passive: true });

// Still needed: resize handler, mobile touch events,
// Safari canvas fix, platform custom-code panel injection,
// CDN setup for 120+ JPEG files, lazy loading...
preloadFrames(120).then(() => drawFrame(0));

Done For You — ScrollerSites

<!-- 1. Paste in your Super/Potion/Simple.ink Custom Code panel -->
<script src="https://cdn.scrollersites.com/embed/v1/player.js" defer></script>

<!-- 2. Place this where you want the animation, via the platform's HTML embed block -->
<div data-scrollersite="YOUR_PROJECT_ID"></div>

Why Add Scroll Animation to a Notion Site

Notion sites are great for speed and simplicity but visually flat. Adding scroll animation to a hero section instantly elevates the perceived production value — useful for product launches, course landing pages, and personal portfolios published from Notion.

● Add scroll animation to product launch pages built in Notion
● Use it on personal portfolio Notion sites for project case studies
● Animate feature breakdowns on course/info-product Notion pages

Adding Scroll Animation to Notion Sites

Super, Potion, and Simple.ink all expose a custom-HTML / custom-code field in their dashboards. Paste the ScrollerSites snippet there for site-wide availability, then place a `<div data-scrollersite>` block where you want it via the Notion-side embed widgets each platform exposes.

● Super: Settings → Custom Code → paste the script tag
● Potion: Site Settings → Custom Code
● Simple.ink: Site → Custom Code
● Use the platform-specific embed block to place the `<div data-scrollersite>` container