PageFlow and MotionForge animation capability question

Elements
1

@Invisigoth When considering your Components and looking at PageFlow and Motion Forge, I’m going to try to describe what it is that I’m interested in accomplishing to see if you can help direct me towards which tool, or tools if necessary, will do what it is that I’m trying to accomplish.

I’ve looked through all of your scroll based interface Components and I have realized that MotionForge is the most complete animation engine that you have available, for sure. However, when it comes to the kind of experience I’m trying to create for a specific page on my website, out of all of the demos you have, the one that feels closest to it when it comes to scroll behavior is PageFlow…

This is where the action is simply, by scrolling (or using the arrow keys), it completes an entire action. It moves from one state to another state completely. The other important aspect of this though that I have in mind that I want to accomplish is that as a part of the object animation, I want to either have or approximate a kind of parallax movement of a vector background that is sliding close to full screen behind the text as it moves from one state to another, with both stopping and then both animating out with a similar animation as they animated in with. Obviously, by vector, I would mean SVG. So I’m looking for something that has the same scroll behavior as PageFlow seems to offer, but it integrates a kind of parallaxing of another graphical element behind the text as it’s floating in. I simply don’t know if it already does something like this, or can at least closely approximate something similar or as effective in how this would look.

The reason for this is that the actual graphical design in that SVG will conceptually (icons/symbolically) relate to what the text is saying. So in this vein, I’m trying to look through all of your Components on offer to see which one is capable of accomplishing this combination of ideas with the kind of behavior I’m looking for.

Can you tell me if Page Flow alone is already capable enough to pull something off that does this or approximates something similar enough to this that it would do what it is that I’m trying to do? Or if not, point me to which other component you have that would do this. Because I’m only going to be, at this point, using this on a single page, I’m far less inclined to want to use something like MotionForge. It really ends up depending on if I’m going to be doing any kind of web development professionally in the future. At this point, I’m developing the site for myself, so I’m kind of just trying to stick with only what is necessary. That said, if a more expensive option is necessary, then that is what I will go for. So, please let me know what you think makes the most sense.

Thank you for any help!

[I’m asking my question, and rephrasing it slightly, in a new post so that it’s more topically and contextually relevant, so that other people can actually search and find it more effectively in case it helps them]

2

@Invisigoth Well, I had hoped that this would make my question more specific and relevant so you’d be able to answer it in particular, but it’s been quite a few days now with nothing. Do I need to rephrase this again, or are you just caught up with crap? I mean, it’s fine either way.

I’m getting close to finishing my site, though, so I would like to understand which of your products would be the one that I would be grabbing. So, if you catch the time and are able to answer this, I really would appreciate it.

Thanks!

3

Hi @GlenAllan,

First of all, I’m sorry for the delayed reply. This is a particularly intense period for me work-wise, and unfortunately I haven’t been able to get back to you sooner.

PageFlow and MotionForge can work either completely independently or together in an integrated way, depending on the type of experience you want to create.

PageFlow is primarily designed to create a navigation experience between individual slides, with a system that can feel somewhat like Vision Pro navigation or moving between pages/slides. It includes simple transition animations between one slide and the next, but creating more complex animations — such as independently animated layers, parallax SVG artwork, more elaborate entrance/exit sequences, and more control over animation timelines — would require a more complete tool such as MotionForge.

That said, I’m not suggesting that you necessarily need to purchase both. Before recommending a solution, I want to make sure we identify the tool that is genuinely the best fit for the result you are trying to achieve.

If you have any online references — websites, videos, demos, or visual examples — please feel free to send them over. Alternatively, if you can put together a small storyboard or even a simple conceptual sketch, that would be very helpful: for example, how you imagine the text entering, how the background should move, and what should happen when transitioning from one scene to the next.

With that information, I can create a custom demo and publish it on my website. That way, you can see the result in a concrete form and freely decide which path makes the most sense, without purchasing tools that may not actually be necessary for your project.

Thanks again for your patience!

4

@Invisigoth This is just a rough idea of what it is I’m trying to accomplish. Technically this isn’t even really parallax. It’s just the closest thing I could think of to what I was looking for when I used that word.

I don’t even know if this is what it would look like anyway, and that’s not really what’s important. It’s more or less, will it approximate something like this?

Obviously, the timing between the different states is accelerated because it’s not waiting when it shows both things come in and stop, whereas with the actual animation, I’d want it to be one swipe or one click on the down arrow key, for instance, and that would trigger the next bit of text and background to come in. And then when you hit the next swipe or arrow key, the current state would animate out and the new one would animate in and stop.

Hopefully that helps explain it.

If audio is an option, something to just play continuously in the background, that would also be pretty damn cool. I guess it’s going to depend on if that is just going to be the difference between Page Flow and Motion Forge, and that’s Motion Forge, I might decide not to do it. But let me know one way or the other what the options are with audio either way, so I can make an informed decision.

[YouTube’s transcoding crushed the background layer clarity. So, that kind of sucks, but I think it gets the idea across either way.]

Video Example | Unlisted Video on YouTube

~Glen

5

As an additional note that might help with you being able to answer the question as well:

If you come to the conclusion, for instance, that Page Flow can do this specific thing(s), my question would also be, can MotionForge accomplish the same thing with the same gesture and arrow control, relatively easily? Or does it all become much more complicated in Motion Forge?

I’m trying to consider future projects where I might want to use some other form of guided information presentation, so I can understand what makes sense both short-term and long-term.

6

@Invisigoth Hey, I know you’re busy, and I’m just pinging you, hopefully it’ll give you reason to just drop in and see if anything I’ve mentioned here can help you help me out, if you’ve got a minute.

I’d really like to figure out what it is I’m purchasing here. I think I’ve given you enough information that you should be able to give me an answer based on all of the different components that you’ve developed, even if they’re not these two, or if it’s, you know, just anything you’ve created.

So, let me know. Thanks!

7

Hi @GlenAllan!

Thank you so much for your message and for encouraging me to gather all your requests! I am super excited to share that I am working on a dedicated section of the site where I will collect user feedback to create a central library with free downloadable demos. The goal is to offer real-world projects based on your actual needs, giving you concrete inspiration that goes beyond my own design vision and truly serves the entire community!

I have already put together a first demo built entirely on MotionForge, which features four incredible interactive examples: backgrounds and text content that animate seamlessly as you scroll.

Regarding the music in Dune page, I wanted to point out a fantastic detail: for the audio/music component, I used a feature that is already fully integrated into Elements!

A quick tip based on my experience: as you might know, mobile devices do not allow audio to autoplay without user interaction (it requires a button tap). The magic here with PageFlow is that you can easily link the button press that starts the music to the slide progression itself! That is because PageFlow allows you to hook slide interactions to any component on your webpage. A handy little trick, right?

To answer your questions about the differences between the two tools:

MotionForge: This is a comprehensive, ultra-powerful animation suite. It lets you animate virtually any HTML element, including present and future template components from the Elements store. The learning curve is surprisingly fast, yet the potential is virtually limitless.

PageFlow: This is a specialized component that simulates smooth scrolling between ‘slides’ (containers) with controlled scroll dynamics. It comes with built-in, pre-configured basic animations—they are super effective and perfect if you are looking for a clean, fast, and elegant solution. However, on their own, they do not offer the same depth and flexibility as MotionForge.

The best part is that both tools were designed to work together seamlessly! If you need a fast, solid foundation, PageFlow on its own is fantastic.
However, if you want my honest recommendation: get both! MotionForge unlocks possibilities bounded only by your imagination, and PageFlow is truly its ideal companion. I know this advice might sound a bit self-serving since purchasing both involves an investment, but I truly believe in it! As a quick reminder, the MotionForge suite already includes 7 components (working out to under $15 each), and I am about to release an 8th component—fully integrated and completely free—once I wrap up a few finishing touches. It is a true long-term investment!

I expect to release the demo combining both PageFlow and MotionForge very soon. I did not include it right away because, after reading your message, I was so excited to get back to you that I did not want to make you wait!

In the meantime, you will find the link below to view the live demo, where you can download the entire completed project—which, of course, I am making available to everyone for free!

Thanks again for your incredible support and to everyone using my components. A special shout-out to those who will join us in the future… it is all thanks to you that I get to keep improving and innovating with so much passion!

:backhand_index_pointing_right: Here is the link for the live demo and download.

Talk soon and happy creating! :rocket::sparkles:

8

Right. I sent you a link to a video with very specific requirements and a very specific example to show you what it is that I was trying to accomplish. I wasn’t asking for a generalized response.

I was asking, based on the example that I sent you, specifically what tool would do that exact thing or something approximating it.

What you just did here just basically feels like you threw an advertisement at me that doesn’t actually tell me anything, and in effect, let me know that I’m not going to get the information I need to from you. That’s a bit disappointing.

I would have figured you would have known what you’ve developed well enough to simply be able to look at the video that I sent you the link to, and you would be able to see that and go, oh yeah, you need MotionForge, or you need PageFlow if you want to do that.

This is a vague non-specific generalist answer to a specific hand built example supplied to make it so you wouldn’t give a non-specific answer.

9

Maybe you just buzzed by after being so busy doing whatever else you were doing, that you failed to look a couple of responses up to see that there was a link to an example.

I mean, I could give you the benefit of the doubt and assume that that’s the case, and that’s why you came up with the answer you did, because you thought I was asking a general question.

If that’s true, can you please look at that link and give me a more specific answer?

Thanks.