User Manual

Page Flow

Create interactive scrolling presentations, full-screen landing pages, and advanced sliders. This guide explains step-by-step how to configure the layout, content animations, and the innovative "Spatial Overlay" navigation.

1. Basic Configuration and Engine

Define your slide selector and choose how the browser should handle transitions.

Container Class

Enter the CSS class that identifies the blocks that will act as slides.

Practical example: Assign the .pageflow-slide class to 3 different divs on your page. The component will automatically transform them into a full-screen sequence.

Transition Engine

Choose between native scrolling or a pure JavaScript engine with a fixed layout.

Practical example: Use "GSAP Compatible" if you want to keep the physical page scroll linked to the elements. This feature was specifically included to integrate natively with the MotionForge component. Use "Pure JS Engine" if you want to lock scrolling and use CSS effects like Zoom or 3D Flip to transition from one slide to another.

Effects and Curves (JS Engine)

If you use the JS engine, you can choose entry animations and acceleration curves (Easing).

Practical example: Set "Elegant Zoom In" with a "Bouncy" curve to create an impactful effect where the next slide appears shrunk and gently bounces until it covers the screen.

2. Loading Screen (Anti-FOUC)

Avoid the "Flash of Unstyled Content" by hiding the page until the layouts are ready.

Enable Loading Curtain

Activate an elegant screen that temporarily blocks the display of the unstyled site.

Practical example: The browser often takes a few moments to calculate vh dimensions and position the slides. Without this option, the user would see the elements jump around. The preloader ensures a perfect entrance.

Box Style and Overlay Background

Customize the colors, the background blur, and the opacity of the central box.

Practical example: Use a 50% black overlay with a 10px blur to give a blurred glimpse of the first slide under the loading screen, creating an elegant glass effect (Glassmorphism).

Custom Spinner and Logo

Replace the loading icon by inserting your brand's logo in the center of the circular spinner.

Practical example: Instead of just the word "LOADING", upload your pictogram in PNG or SVG format to strengthen your brand identity from the very first millisecond of the visit.

3. Navigation Interface

From the classic dot menu to the innovative "Spatial Overlay" in Apple Vision Pro style.

Standard Pagination Styles

Choose from 5 preset styles (Dots, Squares, Line, Pill, Numbered) and position them on the sides of the screen.

Practical example: Select "Pill & Dots" positioned on the right. The active element will become a vertically elongated pill, while the inactive slides will remain small dots.

"Spatial Overlay" Navigation

The 6th style (Image-Center) transforms the navigation into a single button that, when clicked, opens a full-screen dashboard.

Practical example: Insert an image for the button. When the user clicks it, a blurred background will open with a grid of floating icons that allow jumping to any slide non-linearly.

Vision Grid Configuration

Manage icon folders, texts (separated by semicolons), and fallback colors for the spatial overlay.

Practical example: Select an SVG folder from the builder and type Home;About Us;Services;Contact in the labels field. The system will automatically calculate a honeycomb layout based on the number of slides.

4. Content Animations (JS Engine Simulator)

Not only the page, but the content inside also comes to life. Try the JS Engine effects below.

JS Transition Effect

External Animation Test

sassano.me

Slide 1

Select an effect on the left and click the button to change.

Slide 2

Here is the effect applied by the JS Engine!

5. Smart Animations Mode

PageFlow scans the slides' DOM and automatically animates text and media.

Automatic vs Custom Animation

Choose "Smart" to let PageFlow animate all direct children of the slide.

Practical example: Place an image and two text blocks inside the slide. The Smart mode will make them enter one after the other by applying an automatic delay (Stagger), without needing external animators.

Media and Text Entry Styles

Adjust the appearance effect by intelligently separating text from images.

Practical example: You can tell PageFlow to bring in all texts with a "Fade Up" (from bottom to top) and all images/videos with an "Elegant Zoom In" for a very cinematic touch.

6. Interaction and Mobile Sizing

Optimize the physics and responsiveness for smartphones, mouse wheel, and keyboard.

Dynamic Viewport (dvh)

Force the use of 'dvh' and 'dvw' units for mobile devices.

Practical example: The Safari interface on iOS (URL bar) shrinks when scrolling down. By using 'dvh', PageFlow recalculates instantly, preventing the content at the bottom from being covered by the phone's UI.

Custom Navigation Classes

Link any button or element on your page to the PageFlow component using preset classes or IDs.

Practical example: By enabling the "Enable Custom Class Navigation" option, you can assign the next or previous classes to any of your elements to scroll forward or backward. If you want to allow the user to jump to specific sections, you can assign the classes or IDs first (for the first slide), second (for the second), or last (for the last slide of your presentation).

User Manual

Page Flow Animator

The perfect companion for PageFlow. This component allows you to animate individual texts, images, or entire blocks within your slides, orchestrating perfect choreographies thanks to the built-in engine.

1. The Basic Concept

How the Animator component works and how to insert it into your layouts.

A Universal Container

Animator is specifically designed to act as a container for any other element without affecting the structure of your site.

Practical example: You can insert an Animator inside a grid or a Flexbox layout and use it to wrap text, images, or entire blocks. The elements inside it will behave naturally, keeping all your alignments intact and without the Animator altering the layout of the component that contains it in any way.

The Dropzone

Drop what you want to animate directly into the component.

Practical example: Drag a Heading, a paragraph, or an image into the "Drop Elements Here to Animate" area. Animator will take control of everything inside it to make it appear at the right moment.

2. Effects and Choreographies

Customize the entry style and timing to create cascading animations.

Entry Effects

Choose from 5 smooth and modern animation styles.

Practical example: You can assign "Fade Up" to text to make it rise elegantly from the bottom, and "Zoom In" to a central image to make it gain volume. The animation will trigger automatically as soon as the PageFlow slide becomes visible on the screen.

Delay and Duration (Staggering)

Manage milliseconds (ms) to create staggered sequences.

Practical example: You have a Title, a Subtitle, and a Button. Put them in 3 separate Animators. Set the delay (Entry Delay) of the Title to 0, the Subtitle to 150, and the Button to 300. This way, they will enter the scene one after the other, creating a beautiful cascading effect.

Want even more control?

This component is fully functional on its own and includes a selection of beautiful, elegant, and professional animations.

The Next Level: Although absolutely not mandatory, if you want complete control of the page and all the elements in it, using an advanced and constantly growing animation engine — without writing a single line of code and without altering the layout in any way — we recommend discovering Motion Forge.