ScrollCam Documentation

Introduction

Welcome to the official documentation for ScrollCam. ScrollCam is the premier no-code visual builder that empowers designers, marketers, and developers to create breathtaking, full-page cinematic image sequence animations. Instead of relying on complex custom JavaScript libraries or bloated video players, ScrollCam uses the user's natural scrolling behavior (via mousewheel, trackpad, or touch) to scrub seamlessly through high-fidelity visual frames.

Whether you're building an Apple-style product reveal, a high-end portfolio, or an interactive storytelling experience, ScrollCam does the heavy lifting. All images are dynamically loaded in the background for ultra-smooth playback, while standard HTML/CSS text remains perfectly crisp and fully readable by search engines.

Features Comparison: Free vs. Pro

ScrollCam comes in two tiers tailored to your needs. The Free version is perfect for basic projects, while the Pro version unlocks enterprise-grade optimizations and advanced styling.

Browser & Device Compatibility

ScrollCam experiences are rigorously tested across all modern web browsers. It runs flawlessly on Chrome, Safari (macOS & iOS), Firefox, and Edge. Our rendering engine automatically falls back gracefully on older devices, ensuring your site remains usable even if the user's hardware cannot support high-framerate image sequences.

Basic Setup & Scenes

Building an animation in ScrollCam revolves around the concept of Scenes. Think of a scene as a specific chapter in your story. A scene holds a sequence of images (the background) and a set of HTML elements (the foreground content). Breaking long animations into multiple scenes improves memory management and keeps your timeline organized.

1. Creating Your First Scene

To begin, navigate to the ScrollCam visual editor dashboard. Click the prominent "Add Scene" button located on the left-hand timeline panel. This will initialize a blank canvas. By default, a scene spans 100vh (one full viewport height), but you can adjust the "Scroll Duration" slider to make the scene last longer as the user scrolls down.

2. Adding Video & Extracting Image Frames

Scroll animations require image sequences, not actual MP4 videos. ScrollCam provides two ways to import these:

• Direct Image Upload: If you've pre-rendered a sequence in Blender, Cinema4D, or After Effects, simply drag and drop your numbered JPEG/WebP files into the scene's media bin. Ensure they are sequentially named (e.g., frame_001.jpg, frame_002.jpg).
• Built-in Video Extractor: Upload a short MP4 video. ScrollCam's cloud engine will automatically extract the frames at your desired framerate (e.g., 24fps or 30fps) and convert them into an optimized image sequence ready for scrolling.

3. Writing HTML Content

Once your background is moving, you'll want to add text. Click the "Add Element" button in the top toolbar. You can add Headings, Paragraphs, Buttons, and custom Containers. Using the WYSIWYG editor, click and drag elements directly on the canvas to position them. Double-click any text to edit it inline.

4. Basic Animations

In the Free tier, you can apply basic entrance animations to your text elements. Select an element, navigate to the "Animations" tab in the right sidebar, and choose options like Fade In, Slide Up, or Scale. You can tie these animations directly to the scroll progress of the scene, ensuring text appears exactly when a specific visual moment happens in the background.

Per-Device Settings

In today's web, ensuring your cinematic experience works on mobile devices is critical. ScrollCam utilizes a strict mobile-first responsive architecture. This means you design for the smallest screen first, and then add layout modifications as the screen gets larger.

Configuring Layouts & Breakpoints

At the top center of the ScrollCam editor, you will find the Viewport Switcher icons (Mobile, Tablet, Desktop). Clicking these changes the canvas size. By default, any style change you make on the Mobile view will cascade up to Tablet and Desktop. However, if you switch to Desktop and change a font size, it will only apply to Desktop screens and above.

Device-Specific Styling

Often, a heading that looks great on a 27-inch monitor will break completely on an iPhone. Use the Viewport Switcher to jump to the Mobile view, select your heading, and reduce the font size in the Typography panel. The editor will highlight the property in blue to indicate an overridden breakpoint style.

Customizing Interactions for Performance

Mobile devices have significantly less RAM and processing power than desktops. ScrollCam allows you to use the "Disable on Mobile" toggle for heavy elements. We highly recommend turning off complex 3D text interactions on mobile devices, or even swapping out a 1080p image sequence for a 720p version specifically on the mobile breakpoint to save bandwidth.

Detailed Tooling PRO

ScrollCam Pro unlocks the true potential of the engine, giving professional designers and developers the granular control needed to ship award-winning websites.

1. Advanced Scene Settings

• Scroll Delays (Easing): Basic scrolling can feel abrupt depending on the user's mouse wheel. Pro users can apply a "Scroll Delay" (often called Lerp or Interpolation) which adds a smooth, buttery easing effect. The animation will gently glide to a stop even after the user has stopped scrolling.
• Scene Stitching: Seamlessly transition between two entirely different image sequences. Use the "Overlap" setting to crossfade the last frame of Scene 1 with the first frame of Scene 2 based on scroll percentage.

2. Cinematic Settings

• 3D Scroll Interactions: Enable true Z-axis parallax. As the user scrolls, foreground text can push forward in 3D space while the background scales down, creating a dramatic sense of depth.
• Glassmorphism Overlays: Apply real-time background blurs (backdrop-filter) to your text containers. This ensures text remains highly legible even if the image sequence behind it is chaotic or bright.
• Hardware Acceleration: Toggle the "Force GPU" switch to inject CSS transforms (translate3d) on your sequences. This offloads the rendering from the CPU to the GPU, guaranteeing 60fps on modern hardware.
• Advanced Preloading & Caching: Take control of network requests. Configure exactly how many frames are preloaded ahead of the user, and how aggressively old frames are garbage-collected to prevent memory leaks on long pages.

3. Export Settings

For teams integrating ScrollCam into existing stacks (like React, Next.js, or custom CMS platforms), the Pro Export tools are essential.

• Direct HTML/ZIP Export: Click Export to generate a completely minified, production-ready ZIP file. This includes clean semantic HTML, scoped CSS, optimized Vanilla JS, and a highly compressed /assets folder for your image frames.
• Custom CSS & JS Injection: Need to fire a Google Analytics event when a scene ends? Need to override a specific CSS class? Use the Custom Code panel to safely inject scripts into the <head> or before the closing </body> tag.

Common Issues & FAQs

Why is my animation lagging on mobile Safari?

Mobile browsers, particularly iOS Safari, have strict RAM limits (often crashing if a tab consumes more than 200MB). If you are loading 500 frames of 4K imagery, the browser will crash.

Solution: Always use the Per-Device Settings to upload a separate, lower-resolution sequence (e.g., 720p or 480p) exclusively for the Mobile breakpoint. Additionally, enable "Aggressive Garbage Collection" in Pro Cinematic Settings to immediately dump off-screen frames from memory.

How do I optimize my images before uploading?

While ScrollCam attempts to compress your media, it is best practice to pre-optimize. We recommend exporting your sequences from Adobe Premiere or After Effects as JPGs with a quality setting of around 60%. Alternatively, use batch processing tools to convert your sequence to WebP, which can offer up to 30% file size reduction with no visible loss of quality.

Can search engines crawl my text content?

Absolutely. Unlike canvas-based rendering engines that trap text inside a WebGL context, ScrollCam injects all of your text as standard, semantic HTML elements (h1, h2, p) layered on top of the visual sequence. Googlebot and other crawlers can read this text perfectly without even needing to execute Javascript.