We’ve just released a major update to Motion Hero, our Shopify app for creating scroll-controlled video, interactive video experiences and animated video banners.
And this update changes Motion Hero from a simple scroll-video tool into something much closer to a visual motion editor built specifically for Shopify.
The idea behind Motion Hero has always been simple:
Take the type of cinematic scrolling experiences you see on high-end websites and make them possible inside Shopify without building everything from scratch.
Now there are three completely different ways to do it.
3 video modes. One editor.
The new Motion Hero includes three video modes depending on how you want visitors to interact with the page.
1. GSAP Scroll Video
This is the original Motion Hero experience.
Instead of pressing play, the visitor controls the video by scrolling.
Scroll down and the video moves forward.
Scroll back up and it moves backward.
This makes it possible to create frame-by-frame product reveals, exploded product animations, zoom sequences, transitions and other cinematic effects where every part of the animation follows the visitor.
It’s particularly useful for products where the details matter: watches, cars, electronics, fashion, furniture, equipment or premium products that deserve more than a static hero image.
2. Guided Playback
Not every animation should be controlled entirely by scrolling.
Sometimes you want the video to play automatically, stop at an important moment and wait for the visitor.
That is what Guided Playback does.
The video can:
Play → Pause → Wait for Scroll → Continue
This gives brands another way to build product stories.
Instead of making the visitor watch a complete video from beginning to end, the experience can stop exactly where a feature, message or product detail needs attention.
The visitor then continues the story by scrolling.
3. Standard Video Player
Sometimes you simply need a very good video section.
Motion Hero can now work as a standard video player too, while keeping access to the same visual editor.
This means the video can play normally while you add timed:
Titles
Descriptions
Images
Buttons
Icons
Shapes
Animations
So instead of adding text permanently inside the video file, the content remains part of the Shopify experience.
That makes campaigns much easier to update.
The biggest update is actually the Video Editor
The three playback modes are only part of the update.
We rebuilt Motion Hero around a visual editor.
You can upload your video and then build the experience directly around it.
Add a headline.
Move it over the video.
Choose when it appears.
Animate it.
Add a button a few seconds later.
Add an image.
Change where everything appears on mobile.
Preview it.
Publish it.
The goal is to make creating an interactive video section feel much closer to using a visual website builder than writing GSAP animations manually.
Every element now has its own timeline
Timing is extremely important when you are building around video.
A title might need to appear when the product enters the frame.
A button might only make sense after the animation finishes.
A product feature might need to disappear before the next scene begins.
Motion Hero now gives each element its own place on the timeline.
You can control exactly when an element appears and when it disappears, while keeping the complete composition visible inside the editor.
This makes much more complex video experiences possible without turning the project into a custom JavaScript build.
Separate desktop and mobile layouts
A cinematic section that looks perfect on a 27-inch monitor can look terrible on a phone.
That is why Motion Hero lets you build separate compositions for desktop and mobile.
The same video experience can have different:
Positions
Sizes
Spacing
Element layouts
Text placement
Instead of trying to force one composition to work everywhere, each version can be designed for the screen where it will actually be viewed.
Why we built Motion Hero
At MoonImpact, we work heavily with Shopify, custom development and motion-driven ecommerce.
We kept seeing the same problem.
Brands would find an incredible animated website on social media and ask:
“Can we make something like this in Shopify?”
The answer was usually yes.
But the traditional route could involve custom JavaScript, GSAP, ScrollTrigger, responsive development, video optimization, testing and a considerable amount of development time.
For a complete custom website that can still make sense.
For one product reveal or one cinematic hero section, it often doesn’t.
So we started building Motion Hero.
The objective was never to replace custom development.
It was to make one of the most useful parts of these experiences accessible directly inside Shopify.
If a business needs something completely custom, MoonImpact also builds custom and public Shopify apps, integrations and storefront functionality.
But if the objective is scroll-controlled video, Motion Hero now handles much of the work itself.
From video to Shopify experience
The workflow is intentionally simple:
Upload video → Choose how it moves → Design the experience → Preview → Publish
You can create a full frame-by-frame GSAP scroll sequence.
You can combine playback with scroll.
Or you can use a traditional video and build animated content around it.
All three approaches use the same editor.
We’re using it on MoonImpact too
We don’t want Motion Hero to be an app that only looks good in screenshots.
So the MoonImpact website is becoming one of the places where we experiment with it ourselves.
New transitions, product stories, scroll interactions and editor features can be tested in real storefront-style environments before becoming part of future updates.
Because if we build an app for creating memorable Shopify experiences, our own website should probably use it too.
Try the new Motion Hero
The latest version of Motion Hero is now available.
If you want to turn a product video into a frame-by-frame scroll experience, create guided play-and-scroll storytelling or build a more advanced Shopify video banner, explore Motion Hero and see the three modes in action.
Scroll it. Animate it. Publish it.