Question about bundle size of Motion 11

[bakura10]

Hi :),

We've been using Motion One for some years now on all our Shopify themes. The library has served us well and simplified a lot the managing of all our animations. After upgrading to Motion 11 (mainly to experiment with native scroll timeline), we're currently experiencing a few important regressions (I've reported them), but more importantly this new version more or less doubled the bundle size of our dependencies (19Kb => 34Kb Gzip).

As we're doing Shopify themes, we're trying to make sure that the base impact of our code is as minimal as possible, so we might considering downgrading back to Motion One (we're having a quite minimal usage of animations, so this does not seem to be worth the size hit for us).

We would like to know though what is the roadmap of this? Does the architecture of Motion 11 make it hard to reduce the size, or are there plans to bring the size back close to what Motion One does?

Thanks.

[mattgperry]

Hey @bakura10! Thanks for all your reports. I would like to get to them but there's some things I want to get rolling before doing a bug burn down early this year.

The main bundlesize changes are to do with the animate function and the scroll function.

animate should now be imported from "motion/mini" if you're filesize conscious. It has fewer features than the normal import but it is even smaller than before. Of course this is tough if you were using the timeline functionality?

scroll is now twice the size at 5kb. This is to add support for ScrollTimeline.

So I assume the former is responsible for most of the bundlesize changes. If you can get to motion/mini this would obviously help a lot. I do think that later in the year I can have a good go at getting the filesize of the hybrid function down as it relies on a bunch of Framer Motion architecture than I can probably cut some out of. But it will still be much bigger than before because it has more features. The motion/mini is more comparable to the old animate in terms of being a light wrapper around WAAPI.

[bakura10]

Hi @mattgperry ,

Thanks a lot for the answer and for your constant work on those libraries.

We indeed make heavy usage of timeline so using the mini is not possible. This got me confused a bit actually, because the "mini" (https://motion.dev/docs/feature-comparison) indicate that we can get timeline for +0.6 Kb:

But I suppose this is a typo?

We will probably go back to Motion@10 for now, but will definitely give it another try in coming months.

[mattgperry]

FYI the old motiondivision/motionone repo has the docs for timeline/animate co-located in their respective folders in a README.md

Actually this is a little bit of a typo. It could be possible to get a timeline working with animate, when I wrote than I had a API that was more like

animate(sequence([]))

But I found it difficult to explain in the docs (as you only really needed it for the mini version)

Perhaps I can take a look at reinstating this or how possible that would be

[mattgperry]

Yeah the mini animate function works with scroll

[bakura10]

Understood! So yes, basically having the sequence on mini timeline would be what we would need. I've read again the comparison (should have done it before doing the upgrade work :D), and as we're not using individual transform at all in our code, we don't need this overhead I think...

[bakura10]

Hi @mattgperry .

Sorry for pinging you on this one. Do you have an idea of the complexity of bringing the sequence to Animate lite? We're a few weeks away from the release. I would just need to know if I should do the work back to Motion 10, or if it's a matter of a few weeks work (in which case I can negotiate to delay a bit our theme release). I just need the info to know what decision we should take at this stage ;)

[mattgperry]

@bakura10 It was actually already in there, I just had to export it. In 11.18.0 you can

import { animateSequence } from "motion/mini"

And it should be out within the hour

[bakura10]

Wonderful, I will try this week! Thanks a lot for your work as usual.

[bakura10]

It works like a charm. I liked the idea of having a single animate function for everything, but I will take that for the small size. I wanted to work on updating the doc but it does not seem it is open. If that can help, here are the things that need to be updated:

• Document the sequence for Animate mini: https://motion.dev/docs/animate#timeline-sequences
• Update the upgrade path as it states Animate mini does not support sequence: https://motion.dev/docs/upgrade-guide#animate

[bakura10]

I'm closing that as, except for the spring regression which is currently a blocker for us (I currently removed that), the animate and animateSequence allows to keep the same minimal size without loosing functionality over Motion 10.