---
title: "Learning Animated Illustrations"
slug: learning-animated-illustrations
canonical_url: https://mimansajaiswal.github.io/posts/learning-animated-illustrations/
collection: Personal
published_at: 2024-01-06T00:00:00.000Z
updated_at: 2025-02-11T00:00:00.000Z
tags: 
  - "🌱 Seedling"
  - Logbook
  - Code
  - Illustration
excerpt: "One of my goals this year is to create animated illustrations. Those cute-sy but explainable animations for LLMs and papers are the core of scientific communication in my opinion."
author: "Mimansa Jaiswal"
---

## Navigation Context

- Canonical URL: https://mimansajaiswal.github.io/posts/learning-animated-illustrations/
- You are here: Home > Posts > Personal > Learning Animated Illustrations

### Useful Next Links
- [Home](https://mimansajaiswal.github.io/)
- [Publications](https://mimansajaiswal.github.io/papers/)
- [Blurbs](https://mimansajaiswal.github.io/collections/blurbs/)
- [Fieldnotes](https://mimansajaiswal.github.io/collections/fieldnotes/)
- [Personal](https://mimansajaiswal.github.io/collections/personal/)
- [Research](https://mimansajaiswal.github.io/collections/research/)

![](https://mimansajaiswal.github.io/_astro/info-alternate_gray.xE4Ugu2z_Z1EYdWV.svg)

These are logbooks, aka, a stream of how I come around to learning something. They are messy, and are like workbooks, but I think it might help someone to see the process and considerations if need be.

## Why?

One of my goals this year is to create animated illustrations. Mostly for paper explanations but also for process and intuition explanation behind “vibe-checks” in LLMs.

I'd use procreate dreams but you cannot configure those with trigger states, so I can't have them be interactive and procreate is not vector based so I can't export a svg 😟

**See how rive has interactive/state machine (?) based animation**

[](https://rive.app/community/5955-11553-click-on-the-cat/embed)

  

One of the hard parts about this not being associated with a project is I have open ended questions about the scope.

-   Do I need trigger animations for illustrations or is that need coming from data animations?
-   Am I looking for video exports, runtimes (like rive) or svgs?
-   What libraries even exist?
-   Do I want them to be standalone or should they be integrated into the website?

## Possible Libraries and Apps

### Libraries

[

Anime.js | JavaScript Animation Engine

A fast, multipurpose and lightweight JavaScript animation library

![title](https://www.google.com/s2/favicons?domain=animejs.com)

https://animejs.com/

![title](https://animejs.com/media/pages/home/d77f271f80-1769440551/generated-og-image.en.png)

](https://animejs.com/)

Bookmark for [https://animejs.com/](https://animejs.com/)

[

Expressive Animator - SVG animation software

Expressive Animator is a professional SVG animation editor. Create animated SVG icons, logos, and illustrations - export to SVG, Lottie, GIF, Video, and more.

![title](https://www.google.com/s2/favicons?domain=expressive.app)

https://expressive.app/expressive-animator/

![title](https://expressive.app/assets/animator/screenshot-2.jpg)

](https://expressive.app/expressive-animator/)

Bookmark for [https://expressive.app/expressive-animator/](https://expressive.app/expressive-animator/)

[

Motion — JavaScript & React animation library

Motion (prev Framer Motion) is a fast, production-grade web animation library for React, JavaScript and Vue. Build smooth UI animations with examples, tutorials, and a tiny footprint.

![title](https://www.google.com/s2/favicons?domain=motion.dev)

https://motion.dev/

![title](https://framerusercontent.com/images/9IOwyTKAykVZTetDEOb7qh81ZQ.png)

](https://motion.dev/)

Bookmark for [https://motion.dev/](https://motion.dev/)

[

Homepage

Supported by Webflow. Animate Anything - A wildly robust JavaScript animation library built for professionals.

![title](https://www.google.com/s2/favicons?domain=gsap.com)

https://gsap.com/

![title](https://gsap.com/GSAP-share-image.png)

](https://gsap.com/)

Bookmark for [https://gsap.com/](https://gsap.com/)

[

Rive — the interactive experience engine

Behind Spotify Wrapped, Duolingo, and products reaching 2 billion users. Design, animate, and code in one place. Ship everywhere.

![title](https://www.google.com/s2/favicons?domain=rive.app)

https://rive.app/

![title](https://framerusercontent.com/images/yEWMbP7UtsS81SlkoxTasfabvc.png)

](https://rive.app/)

Bookmark for [https://rive.app/](https://rive.app/)

[

p5.js

p5.js

![title](https://www.google.com/s2/favicons?domain=p5js.org)

https://p5js.org/

![title](https://p5js.org/_astro/hero.Bs2hPNEZ.webp)

](https://p5js.org/)

Bookmark for [https://p5js.org/](https://p5js.org/)

### Apps

[

Flourish

Bring data to life with Flourish. Create data visualizations and interactive content – no coding needed. Engage, inspire, and tell your best data stories with ease.

![title](https://www.google.com/s2/favicons?domain=flourish.studio)

https://flourish.studio/

![title](https://flourish.studio/images/generic-meta-tag.png)

](https://flourish.studio/)

Bookmark for [https://flourish.studio/](https://flourish.studio/)

[

Jitter · A fast and simple motion design tool on the web

Jitter is a collaborative motion design tool that lets you create professional animations in minutes, no matter your experience with motion.

![title](https://www.google.com/s2/favicons?domain=jitter.video)

https://jitter.video/

![title](https://jitter.video/static/homepage-2025-9e6e31916ac6440c60bf616b81500c31.png)

](https://jitter.video/)

Bookmark for [https://jitter.video/](https://jitter.video/)

* * *

## Cite This Page

```
@article{jaiswal2024learninganimate,
  title   = {Learning Animated Illustrations},
  author  = {Jaiswal, Mimansa},
  journal = {mimansajaiswal.github.io},
  year    = {2024},
  month   = {Jan},
  url     = {https://mimansajaiswal.github.io/posts/learning-animated-illustrations/}
}
```