Animator Core (the renderer, which is built on top of web browsers' native DOM + SVG renderers) does not support very large vector graphics. Normally this manifests as a very slow editing experience.
So, the first thing you should check is if the assets you’re dealing with are incredibly detailed vector graphics. We have seen situations where some SVGs weigh in at 1+ MB.
You should be able to verify if this might be the issue quickly by inspecting the file size of your slices (there’s a “Show in Finder” three dot context menu item next to your Sketch file in the Library on the right). For a file called
Name.sketch, look inside
Name.sketch.contents. Typically this will be a couple of KB at most.
It would be good to understand why they’re so big in the first place:
- Did you create this with a graphics tablet or similar? Some drawing tools emit everything as a custom
- Which design tool did you use to create your illustration? For example, Illustrator does tend to under-simplify its vector drawings.
A few things you can try:
- For any complex vector assets, try converting them to raster (via the design tool where you authored them)
- Try exporting to Lottie and using lottie-web on your website to see if this speeds things up (Lottie will not support interactivity/code)
- If your animation is not interactive, you can pre-render it by exporting to mp4 and embedding that video on your website
- Finally, if it is interactive: just remember at the end of the day that you're creating software with Animator, which is bound by the performance constraints of the final medium (the browser). It simply may be that you're trying to push the browser & Animator Core beyond their practical limits, which would require iterating on your design (e.g. reducing the number of elements) to make it work.