[LAUNCH] Motion Forge Suite: The Only Animation Solution You Will Ever Need (Invisible, Powerful, Unlimited Sequences!)

[Invisigoth (Chris)]

Hey everyone,

I am incredibly excited to finally announce the launch of Motion Forge Suite, an all-in-one solution designed to bring premium, professional animation capabilities directly into your workflow without any of the usual complexity.

Whether you want to create breathtaking scroll effects, sequential storytelling, or interactive layouts, Motion Forge gives you complete creative freedom to build engaging web experiences.

The Invisible Advantage

The biggest advantage of this suite is that it works completely behind the scenes. It acts as an invisible engine running in the background of your page, meaning it has absolutely no visual impact on your layout structure and will never alter or distort your original design.

Universal Compatibility

Motion Forge adapts seamlessly to your existing projects. It is fully compatible with:

• Any custom static layout you have already built from scratch.
• Any native or future layout integrated into the platform.
• Any template downloaded from the store, even those created by third-party developers.

The Standalone Modules Included

Core – The main engine that seamlessly coordinates everything behind the scenes, ensuring optimal performance.

Director – Controls the overall flow of your elements, managing how they appear, disappear, and respond beautifully to page scrolling.

Timeline – The master sequence builder that orchestrates the overall timing, pacing, and flow of your animations. Set the structure, define the rhythm, and let your story unfold exactly as you envision it.

Keyframe – The individual building blocks of movement. Working in perfect synergy with Timeline, Keyframe lets you define every single moment of change along the sequence. You can add as many keyframes as you want, placing them exactly where you need them to craft endlessly rich, unlimited motion sequences.

Draggable – Adds natural, fluid interaction, allowing users to freely grab and drag elements across the screen.

An Investment That Pays for Itself Instantly

Whether you are building a personal project to elevate your portfolio or a professional website for a client, this suite pays for itself with the very first site you create. Given the value it adds to your workflow and final delivery, it is truly an opportunity you cannot afford to miss.

Built for the Future (Free Lifetime Updates)

This is just the beginning. The suite is built to grow, and new modules are already actively in development to expand your creative possibilities. By purchasing Motion Forge today, you will receive all future components, tools, and modules free, forever. No subscriptions, no hidden fees.

The suite is now live on the store! I am right here in this thread to hear your thoughts, answer your questions, and gather your feedback. I can’t wait to see what you create!

Check it out here: Download it NOW!

I am here as always to support you through any doubts or questions. Talk soon!

Best,
Invisigoth

[dan]

This looks incredible, congrats on the launch of another super high quality add-on!

[herbing (Kai-Uwe Herbing)]

I second that. Instant buy, I have no idea yet, where I will use it, but needed to have that. It creates that must have feeling

One thing I observed, is that it seems to include the wrong demo project. I have now two times the Lumiere Title demo project in the project picker.

Thanks for taking a look.

[Invisigoth (Chris)]

Hi @herbing,
thank you so much for pointing this out and for your enthusiasm – I’m really happy to hear Motion Forge gives you that “must have feeling”!

This is exactly what happens when you work until 4:00 (really) in the morning for several days, just to get the suite released as soon as possible. I’ve just fixed the issue; it was simply caused by a wrong copy‑and‑paste in a little string in a small file.

If you update the component, you should now see the correct demo project in the project picker.

I’m absolutely at your disposal for anything you might need: questions about how the suite works, ideas for projects where you’d like to use Motion Forge, or help with specific animations. Feel free to write here in the group or send me a private message – I’ll be more than happy to support you in any way I can.

P.S. I highly recommend checking out the demo, it looks really great!

Talk soon,
Christian

[herbing (Kai-Uwe Herbing)]

Update works! Thanks!

[Fuellemann (Jan Fuellemann)]

Hi, what is the difference to the other two components like Scrollyplaying and Scrollyplay?

Thank you

Btw: instant purchase!

[Invisigoth (Chris)]

Thank you @Fuellemann, thank you so much.

The main difference is that Srollyplay and Scrollytelling are designed to control an image sequence or a single video via scroll, effectively turning the scroll position into a scrubber over those frames.

The scroll is mapped to the progression of the sequence, so the user scrolls up and down to move forward or backward through the visual content.

Motion Forge works at a different level: it does not focus on a sequence of frames, but on the actual HTML elements that build your page layout.

Any site or template you use in Elements – your own projects, Store templates, or included projects – is made of individual HTML elements (images, containers, text boxes, tables, buttons, etc.).

With Motion Forge you can animate these elements one by one along a timeline, controlling their position, opacity, scale, rotation and more, in relation to scroll or other triggers depending on how you configure the suite.

What you see in the demos on your site are therefore real HTML elements (typically JPEG/PNG images, but also other elements) being animated over time, not a pre-rendered video or frame sequence.

Put simply: SrollyPlay/Scrollytelling turn scroll into a “player” for image/video sequences, while Motion Forge turns scroll (and the timeline) into a full animation engine for the actual structure of the page.

Each component is designed to do one specific thing.
I am preparing a demo that combines the capabilities of all my components to show that, with Elements and my components, you can create any effect you want and bring to life everything your imagination can come up with.

Thank you for your trust I’m here for all of you.

[handshaper (Robin Mair)]

I bought this as well, and I see great potential for its use in my projects.

But I find it would be really helpful if there were a series of much simpler examples that would show how to set certain types of animations. I’m sure others might find this helpful, as I know I would. My hope would be that, starting from simpler examples, I would be able to build up enough knowledge to push my usage further.

Here is the first example I’m attempting to construct. I have one portion of it working but have not been able to figure out the second half.

What I am trying to achieve is that the SVG logo slides in from the right and the text slides in from the left when the page loads. Then as the user scrolls, the logo and text are STICKY when they reach the top. Once the logo starts to go off the screen, it should slide off the way it came. Then once the text gets to the top of the screen and starts to disappear, it then slides back the way it came.

I have the first part working, but I cannot figure out how to get the second part going.

Sample Project

Attached is the sample project I have been using to test this and figure out what I’m doing.

I also noticed that if I slow down the sliding, it seems to also slow down the start of the animation. I would like the animation to start as soon as the page is visible but slide at a slow pace. Is this possible?

Another thing I have noticed is that once the banner scrolls off the screen and then back onto the screen, the text will slide back in again, but the logo does not. Why?

I would like the two elements to scroll off-screen when the banner starts going out of view, and then back in when it comes back into view. Hope I’m not asking too much.

Final question: Is it okay to have the core component in a global like I’m doing, or should it be outside the global and added to all the pages where the global is utilized?

Any help would be greatly appreciated.

UPDATE: The project has been updated to remove some of the proprietary artwork and images.

[Invisigoth (Chris)]

Hi, and thanks again for purchasing my Motion Forge Suite component!

I’m attaching an animated image so we can check together if this is the effect you are trying to achieve.

I probably downloaded your project file before you updated the example you sent me, so I might not be looking at the latest version.

Please let me know if the animation you see matches what you had in mind; I’m sending it just as an example, to make sure I’ve understood your request correctly.

[handshaper (Robin Mair)]

Aloha Chris,

Yes, that is exactly what I am trying to achieve.

[MichaelDroste]

Went through the preview - very good on iPhone

How much processing power does this take?

How much data need to load for animations?

Compatible with all browsers and devices?

Thank you!

[Invisigoth (Chris)]

Animations based on the GSAP library follow a logic common to all types of interactions created with this tool.

There is always a need for something that controls the progress (forward and backward) of the animation, much like a needle reading a specific track.

To fulfill your request, I used two components:

• Director: to animate the entrance of the logo elements and the subtitle. I chose this approach because there was no need to bind them to a specific timeline.
• Timeline: to handle the exit and subsequent entrance of the elements to be animated.

When controlling the animation state using nested containers, it can sometimes happen that the positioning turns out slightly different than expected; this can sometimes happen when using positioning methods like Sticky in combination with GSAP.

Therefore:

• I linked the entrance and exit animation reference directly to the banner component #banner-content
• setting a defined height of 210px to have a precise point of reference.
• Additionally, using a custom function, I added top+=150px and bottom+=210px inside the element’s trigger points. This option is an absolute lifesaver for highly customized animations; I included it specifically to provide that extra touch of technical customization (not always necessary, but very effective)

Everything will be much clearer in the attached demo.

Of course, feel free to ask me anything you need—that’s exactly what I’m here for. I hope this was clear and, above all, helpful!

Download demo

[handshaper (Robin Mair)]

Awesome, this is very cool. I had not looked at the director components; it makes a lot of sense.

This is almost exactly what I was looking for in this animation.

Question: How do I prevent the text from overlapping the bottom of the banner when it is scrolling away? I can live with it the way it is now, but I’m curious how you would solve that issue.

Thank you so much for your help. This has really given me a better insight into how to leverage this amazing tool. I’m sure I’ll have many more questions as I delve deeper into its capabilities.

[handshaper (Robin Mair)]

Nevermind, I should have looked more carefully at the sample. I figured out how to solve the issue. I increased the size of the #banner-content to fully encapsulate the logo and text. Then I set the custom bottom trigger to use a value 20px less than the content height, and it worked perfectly.

Amazing stuff! This is going to be so much fun.

Thank you for developing this amazing component. There is much to learn, but I have already learned a lot from this first attempt and your guidance.

Now I’m looking forward to all of the future add-ons!

[Invisigoth (Chris)]

Hi! Thank you so much for your message @MichaelDroste

Here are the answers to your questions, point by point:

• Went through the preview - very good on iPhone
  The animations in this component are ultra-optimized. They run on a powerful, battle-tested library that is the absolute industry standard for web animation. Because of this, as long as your layout displays correctly on a device, any animations you add—whether on a pre-existing layout or during the design phase—will render perfectly and smoothly across all screens.

• How much processing power does this take?
  This depends entirely on the number of objects you choose to animate at the exact same time. A great advantage here is that it only affects elements currently visible to the user; off-screen animations don’t drain any processing power. As you might have noticed from the demos on my website, everything runs ultra-fast and smooth even on older devices, which I specifically tested before releasing the components!

• How much data need to load for animations?
  You’re going to love this: the data footprint is practically non-existent! The core code required to run the animations is already pre-loaded by Elements. If you need extended features, my component simply loads a few extra plugins that are so lightweight (just a few KBs) they are completely unnoticeable. Just keep in mind that overall page weight depends on your assets (like unoptimized images), but that’s a general web practice and has nothing to do with the animation engine itself.

• Compatible with all browsers and devices?
  Absolutely! Anything you build with Elements that is visible across different browsers and devices can be animated. The animations are 100% compatible with every single device and browser on the market, without any limitations whatsoever.

Feel free to reach out if you have any other questions. Thanks again!

[Invisigoth (Chris)]

@handshaper hearing your enthusiasm is exactly why we build these components.

In the meantime, please remember that I am always here to help. Whether you run into another roadblock, want to bounce an idea around, or just need a quick tip, don’t hesitate to reach out.

Happy developing, and enjoy the process!
Chris

[AnasHyeee (Anas)]

Wow, an awesome project with magical motion. I like it

[Invisigoth (Chris)]

Hi everyone,
thank you so much for using my components and for the amazing support you are giving to Motion Forge Suite.
A special thank you to @AnasHyeee for the kind words, they really mean a lot and motivate me to push this suite even further.

As promised, I am about to launch two additional components that will be fully integrated into the Motion Forge Suite and will be completely free for all current Motion Forge owners.
These new modules will bring even more incredible features into the suite, making Motion Forge even more powerful and flexible for your animation workflows.

Link to store
https://store.elementsapp.io/components/motionforge

My website (all interaction and animation in my website are made with my components)
https://www.sassano.me/components/

[roberto.travagliante]

Amazing news! The suite seems already fantastic, so it’s great to hear that even more components are on the way! Great!