🚀 [NEW COMPONENT] PageFlow: Bring Full-Page Scrolling and Cinematic Impact to Your Elements Sites!

[Invisigoth (Chris)]

Hi everyone!

I am super excited to officially introduce PageFlow, the new premium component designed to transform pages made of multiple full-screen sections into a guided, interactive, and visually stunning cinematic scrolling experience inside Elements.

If you are building landing pages, portfolios, or visual presentations structured across multiple full-screen sections, PageFlow is the ideal tool. It takes each section on your page and handles it like a slide snapped perfectly to the viewport, giving you full design control and a smooth, distraction-free browsing experience.

What Makes PageFlow Special?
Here are some of the key highlights built for your projects:

• Built for Full-Screen Sections: Designed specifically to handle pages divided into full-screen sections, making transitions between blocks seamless and impactful.
• Engine 1 - Real Scroll (MotionForge Compatible): Keeps the native page scroll and was custom-built to integrate perfectly with MotionForge. This allows you to synchronize full-page section snapping with advanced animations (just like the ones shown on our Dune demo page!).
• Engine 2 - Fixed Screen (7 Built-In Visual Effects): A fixed-layout mode featuring 7 built-in, high-impact transition effects (Elegant Zooms, Fades, 3D Rotations, Slides, and more) for anyone wanting a pure slideshow effect without needing external scripts.
• BONUS COMPONENT: PageFlow Animator (Included Free!): Included in the package is a dedicated second component designed to animate individual elements and content within your slides (text, images, buttons). It brings your components to life with elegant sequential animations the exact moment each section enters the screen!
• “Spatial Grid” Navigation (visionOS Style): The ultimate WOW effect. A full-screen dynamic honeycomb overlay grid complete with custom icons, labels, and a modern blurred backdrop to instantly jump between sections.
• Anti-FOUC Screen (Zero Flashes): No more unstyled or misaligned layout flashes while the page loads. A customizable welcome screen covers browser calculations to ensure a flawless entrance.
• Mobile Perfection: Forget the typical full-screen scrolling issues on smartphones! PageFlow natively manages touch/swipe gestures and dynamic mobile browser heights, eliminating annoying jumpiness caused by address bars on iOS and Android.
• Custom Triggers: Easily turn any external button, icon, or text on your page into a custom trigger to navigate directly between sections.

Built Specifically for the Elements Editor
No more guessing while designing: PageFlow offers a 1:1 pixel-perfect WYSIWYG preview directly inside the editor. What you design on the Elements Canvas is exactly what your visitors will see online, with zero script conflicts.

Demo Page & Store
See PageFlow and MotionForge in action on our demo page to discover what you can build:

Dune Demo

Download PageFlow Now
Download now with 15% off for a limited time!

I’d love to hear your thoughts, which features you’re most excited about, or how you plan to use it in your upcoming projects. If you have any questions or technical curiosities, feel free to ask below!

Happy designing!

[dan]

Congrats on the launch, you really are building up a library of amazing components for Elements

It’s also worth noting that this is the 100th add-on now available in the Elements Store!!!

[Invisigoth (Chris)]

@dan Thank you so much! I’m truly thrilled by your kind words, and knowing that this is the 100th component on the Elements Store makes it even more special!

Elements is such a wonderful community of users and developers, and this incredible milestone is all thanks to you and your team for building and supporting this platform with so much passion.

Thank you so much for this amazing opportunity!

[aldo]

I have already had the opportunity to congratulate the Elements team and @Invisigoth on their truly interesting and intriguing components. I would like to say a few words to help us all understand the importance of the work you are doing. I have never even considered the web as a form of communication – it is too superficial, too immediate for someone who has been working for over 40 years as a director of cultural audiovisual productions for museums. Films, books and even HTML applications – but never, in the past, websites. I’ve only ever had one experience with RW8 to create my personal website, which is simply a portfolio of my work. Furthermore, I know nothing about HTML or programming; in the world of cinema, a director doesn’t need to know how to do it – I just need to know who does and hire them. I’ve started experimenting with Elements and MotionForge, ScrollyTelling, and now with PageFlow, and I must tell you that I’m changing my mind; I’m slowly realising that now – not before, but now, and thanks to you – the form of the narrative has finally become more important than the effect, and that the foundations are beginning to be laid for a hypothetical-deductive exploration. No longer just titles, but stories. I’m writing this not to reiterate my enthusiasm, but to imagine that a new market might emerge around the fusion of different skills within a new integrated system. Having said that, I’m going back to studying – not everything is straightforward for a web novice – but I hope to be able to draw on many years of experience in this field too. See you soon, and let’s stay in touch. Aldo.

[Invisigoth (Chris)]

@aldo thank you so much for your kind words!

When I design and build components, my primary goal is to empower everyone to tell compelling stories. Components and technology are merely tools, the real key to success always lies in the ideas, the creative vision, and the narrative capability of the person using them.

I learned this fundamental principle throughout my career, and especially during one of the most life-changing experiences I’ve ever had: collaborating with one of the greatest artists in the world, David Copperfield, alongside his incredible team, specifically Chris Kenner and Homer Liwag.

From them, I learned that the story you want to tell must always come first. The tools (technological or otherwise) are only there to serve that vision. In fact, many of the components I create today are an evolution of concepts and projects I shared with that amazing team to craft incredible visual effects designed to inspire people.

I am always here and happy to help anyone using my components who needs support in bringing their story to life.

Finally, I want to extend my heartfelt thanks to @dan and the entire Realmac Software team for creating Elements. I know I say it often, but it is a truly sincere thank you. They have built an incredible app and brought together a fabulous community that I am deeply honored to be a part of.

Thank you again for your support, I can’t wait to see the stories you’ll build!

[aldo]

@invisigoth Thank you so much for your spiritual reaction, I would like to take this opportunity to point out some unusual behaviour I’ve noticed whilst working with MotionForge. I’ve attached a test I prepared whilst trying to set up an animation.

A very simple text animation on a background:

elementsapp://downloadDocument/orFsRHrtAyHq

I’ll describe the behaviour I’ve noticed

If the background is a solid colour, as set in the example, it works as intended; If you try changing the background of the “Opening” to the image of the two monks that’s already uploaded, it seems to work correctly; if, on the other hand, you switch it to “video”, the behaviour becomes strange and the titles appear straight away.

In conclusion, I can’t get the animation to play automatically with the background video, It could be my mistake, given my limited experience, and I’d appreciate your help in understanding this.

However, if I activate the scrubber on the timeline, not using the play mode, and repeating the test, it seems to work quite well.

I’d also like to point out that when the background is set to ‘video’, the Elements preview randomly stops working and I have to switch back to a solid colour to continue working.

I’d also like to take this opportunity to ask you for further documentation on the simultaneous use of PageFlow and StoryTelling; to study this in depth, I’d need a bit more information or a test project showing them working together.

Thank you for your kindness and thank you again for the ideas you’re providing.

See you soon

Aldo

[Invisigoth (Chris)]

Hi @aldo,

Apologies for the delayed response. This summer period, work, and the launch of a truly incredible new component have been stealing a lot of my time… time that I’m spending with great pleasure, though.

I’ve reviewed the demo you sent, and I have to say: your use of the component is incredibly cinematic!

The solution to the problem came to me the moment you mentioned the Elements preview. I want to emphasize that I am practically in love with this platform, so what I’m about to say is absolutely not intended as a criticism of this wonderful program.

I believe the issue lies in how a video is handled when set as a background within a container. The fix was simple: I inserted the specific video component inside a container, using a grid element to center it just like the other titles, and it seems to work perfectly now.

I’ve re-uploaded the corrected demo link below.

Link

Regarding your question about using PageFlow and StoryTelling together, I’d love to understand how you plan to use the two components together. If you can share a few more details about your project or the specific effect you’re aiming for, I’d be more than happy to help with a tailored example or guide.

See you soon, and thank you again for your support!

[Invisigoth (Chris)]

Last 3 hours! Don’t miss your chance to take advantage of the special discount on the PageFlow component. It’s the perfect time to enhance your projects with smooth and dynamic animations. Hurry up, the offer expires soon!

Download PageFlow Now

[aldo]

Hi @Invisigoth,

thank you for your reply. I’m particularly pleased because the workaround you’ve suggested had actually crossed my mind and I’d tried putting it into practice. I’d raised the issue with you thinking it might be MorionForge’s fault, but you’ve made me realise that it must be inherent in the way Elements handles the video background. I’m also keen to learn Elements. I’d like to reiterate that I’m very adept at using video editing and animation software, but I have absolutely no experience with Flex, Grid and all the other complex features that sometimes throw me off track.

In any case, I consider the issue resolved and I know how to proceed. After all, the glitch only occurs when using MotionForge’s automatic animation and disappears when I use the scrubber.

As for combining PageFlow and ScrollyTelling, I’m looking into it. As I mentioned, the web isn’t my main line of work, and I’m learning Elements using your components in my spare time. I’m doing this because, in the past, I produced many eBooks for major international museums, trying to challenge the idea that a page is merely for reading; today, I think that if I were to learn how to use Elements, I could produce something similar—as if it were a web application rather than a website. So the idea would be to use a page with all possible interactions as a standalone communicative experience and move on to the next one as if you were leafing through a book, whilst retaining all creative and production freedom. As soon as I have a clearer idea, I’ll send you an example: whether it works or not.

Thank you for your effort and support

[handshaper (Robin Mair)]

Is there a demo project for PageFlow?

[aldo]

Hi @invisighot, I’m back to give you an update on the workaround you suggested. I have found that it works perfectly in preview mode within Elements, but once published, it randomly displays the same issue as before. This means that the video and MotioForge together may cause problems and should be used with great care.
Of course, it would be simple to insert the animated text directly into the video using editing software, but I really liked the difference in detail between the compressed background and the vector text (in our line of work, it’s the details that make all the difference). For now, I think I’ll try to come up with some other ideas to move forward; perhaps it would be helpful if @Dan were aware of the issue in case they decide to review the video component in the future.
Thanks again for your support

[aldo]

Hi @Invisigoth

Sorry to bother you again, but I think that’s one of the reasons we’re running these tests. Try reopening the Chris test you sent me yesterday; in the first MF Keyframe called ‘Titolo out’, try changing the Y offset for the various resolutions and check if it works – I’ve had some issues and can’t seem to see any differences in behaviour.
Thanks for your patience

[Invisigoth (Chris)]

@handshaper yes, a demo is included with the PageFlow component. However, I am currently preparing some modifications and updates to the integrated demo to make it even more comprehensive and useful.

Stay tuned for the upcoming updates!

[handshaper (Robin Mair)]

I could not find a demo when I purchased the component, where do I find it?

I tried the normal approach of creating a new project and then opening a sample project, but one was not available that I could see.

[Invisigoth (Chris)]

Hi @handshaper ,
I’m writing to share a couple of useful updates regarding the demo projects:

1. Integrated Basic Demo: Just so you know, a very simple demo project designed to help you quickly get the hang of the component’s basic features is already integrated right when you create a new project. I’ve attached a screenshot here so you can easily spot it!

2. Full Demo (Dune-inspired): As I mentioned in my last message, I’ve extracted the full demo from my site, including all the assets from the Dune-inspired page. You can find it in the Demo Page section on my website, but for convenience, here’s the direct link to download it freely: [Demo gallery].

I really hope this demo will be helpful to you and to other community members as well!

Since this is the most comprehensive demo possible, it naturally includes the animations built with the Motion Forge library.

If I’m not mistaken, you’ve already purchased Motion Forge… and well, even if I’m wrong and you haven’t, I’ll thank you anyway just in case! (Jokes aside, thanks a lot for the support!).
Let me know if you have any questions or need anything else.
Best,
Chris