---
title: "Creating Lottie Animations with Adobe After Effects and JavaScript Interaction Part 2 - Advanced Techniques"
description: "A deep dive into advanced Lottie animation interactions, covering playback speed, frame control, click event binding, and optimization tips for oversized animation files."
canonical_url: "https://blog.markkulab.net/en/post/lottie-javascript-interactive-part-2"
author: "Mark Ku"
author_url: "https://blog.markkulab.net/en/author/mark-ku"
site: "Mark Ku's Tech Notes"
date_published: "2021-12-20 01:01:01 +0800"
category: "Frontend"
tags: ["lottie", "javascript", "vue", "adobe after effect", "ae", "animation", "frontend"]
language: "en"
license: "CC BY 4.0"
license_url: "https://creativecommons.org/licenses/by/4.0/"
attribution: "when reusing or quoting, credit the author and link back to the original"
---

# Creating Lottie Animations with Adobe After Effects and JavaScript Interaction Part 2 - Advanced Techniques

## Creating Lottie Animations with Adobe After Effects and JavaScript Interaction Part 2 - Advanced Techniques

## Background

In [Part 1](https://blog.markkulab.net/2021/12/16/lottie-javascript-interactive), we learned that Adobe After Effects allows you to name layers with a `#` suffix, which causes those characters after `#` to be converted into element IDs in the exported file. JavaScript can then communicate with the animation by manipulating the DOM. This post focuses on more advanced JS-to-animation interaction features.

## Understanding Frame Rate Before Controlling Frames Programmatically

Frame rate is the unit of animation playback — simply put, it's how many frames are displayed per second.
[[More about frame rates]](https://www.reneelab.net/frames-per-second.html#Ab)

## Dynamically Changing Text

As covered in [Part 1](https://blog.markkulab.net/2021/12/16/lottie-javascript-interactive/), you can use the Lottie API's `setText` method to update text within an animation.

## Loading an Animation and Setting Playback Speed

```
this.lottieAnimation = lottie.loadAnimation({
        container: this.$refs.monkey, // 掛在到對應的 DOM 節點
        loop: true,
        animationData: require('@/assets/lottie/monkey.json'),
        autoplay: true
      })
that.lottieAnimation.setSpeed(0.1);
```

## Callback Events on Animation Completion

```
this.lottieAnimation.onComplete = function() { // loop = false 才會被觸發
  console.log('complete')
}

this.lottieAnimation.onLoopComplete = function() {
  console.log('loopComplete')
}
```

## Getting the Current Playback Frame

```
this.lottieAnimation.addEventListener('enterFrame', () => { // 現在在幀
 console.log('現在幀數', that.lottieAnimation.currentFrame)
})
```

## Playing a Specific Frame Range

```
that.lottieAnimation.playSegments([11, 30], true) // 播放，第11到30幀的動畫
```

## Binding Click Events

```
that.lottieAnimation.addEventListener('DOMLoaded', () => {
    document.getElementById('banana').addEventListener('click', function() {
     alert('click')
    })
})
```

## Hover Effects

Adobe After Effects doesn't have many built-in web interaction directives or scripts, so complex interactive features are better handled directly with CSS and JavaScript.

```
<style  lang="scss">
// 滑動事件
#banana:hover {
  filter: drop-shadow(0 0 30px rgb(0, 255, 255));
}
</style>
```

## Use Case

Combining the techniques above, you can build a small game: lock the animation to a specific frame range on start to show a waiting animation, then play the second segment once the user clicks the banana.

![Cartoon monkey, banana, and frame number for Lottie animation interaction](https://blog.markkulab.net/content/markku/posts/lottie-javascript-interactive-part-2/images/rvRjg2C.png)
[Demo video link](https://www.loom.com/share/f49c2a37725a44509c3bbb88739aac9f)

## Example Code

```
<template>
  <div>
    <div class="flex">
      <div ref="monkey" />
    </div>
  </div>
</template>
<script>

import loApi from 'lottie-api'
import lottie from 'lottie-web'
import { numberFormat } from '@/utils'

export default {
  components: {

  },
  data() {
    return {
      lottieAnimation: null
    }
  },
  created() {

  },
  mounted() {
    const that = this
    that.lottieAnimation = this.loadLottieAnimation()
    that.lottieAnimation.playSegments([0, 10], true) // 開場動畫
    that.lottieAnimation.addEventListener('enterFrame', () => { // 現在在幀
      console.log('enterFrame', that.lottieAnimation.currentFrame)
    })

    that.lottieAnimation.addEventListener('DOMLoaded', () => {
      document.getElementById('banana').addEventListener('click', function() {
        that.lottieAnimation.playSegments([11, 30], true) // 播放 11到30幀的動化 香蕉
      })
    })

    let count = 1

    // 每兩秒去修改 rate 裡面的值
    setInterval(() => {
      count = count + 0.01
      var api = loApi.createAnimationApi(that.lottieAnimation)
      var elements = api.getKeyPath('test#rate').getElements() // 查找對象
      var ele = elements[0]
      const result = '' + numberFormat(count, 2) // 修改改傳入的值必須是字元串不能是數字，否則會失敗
      ele.setText(result)
    }, 2000)
  },
  methods: {
    loadLottieAnimation() {
      const that = this
      return lottie.loadAnimation({
        container: this.$refs.monkey, // 掛在到對應的 DOM 節點
        loop: true,
        animationData: require('@/assets/lottie/monkey.json'),
        autoplay: true
      })
    }
  }
}
</script>

<style  lang="scss">
// 滑動事件
#banana:hover {
  filter: drop-shadow(0 0 30px rgb(0, 255, 255));
}
</style>
```

## Solutions for Oversized Lottie Animation Files

### 1. Animation File Too Large

- Certain effects that use masks can produce very large files when exported for the web.
- Overly complex layers should be converted to PNG; otherwise the animation file size can balloon.
- Assets that never appear within the animation frames should be removed, as they still get bundled into the output file.

### 2. Running Out of Memory During Playback

![Chrome DevTools performance monitor highlighting 2,850 DOM nodes](https://blog.markkulab.net/content/markku/posts/lottie-javascript-interactive-part-2/images/DSzyDwm.png)

- When using `v-if`, Lottie may not be properly released. Each Lottie instance must be destroyed by specifying its `name`; otherwise the DOM node count will keep climbing.

### 3. Choose Compression Quality (JPEG or PNG) When Exporting from AE

![After Effects Bodymovin settings with compression quality set to 80](https://blog.markkulab.net/content/markku/posts/lottie-javascript-interactive-part-2/images/t1E2nuw.jpg)

### 4. Compress Base64 Images and Strip Unnecessary Properties with lottie-compress

## Summary

I think Adobe After Effects is well-suited for creating animations and lightweight mini-games. However, for highly interactive or complex games it's not the ideal tool — After Effects was designed for animation, and its integration with front-end code isn't particularly ergonomic.

## Additional Tips

- If a designer uses AI (Illustrator) files in After Effects, the vector files must be converted to vector shape layers before exporting to Lottie.
![After Effects menu highlighting Create Shapes from Vector Layer option](https://blog.markkulab.net/content/markku/posts/lottie-javascript-interactive-part-2/images/jwWn25K.png)
- A great After Effects plugin that helps beginners quickly apply effects: [misterhorse](https://misterhorse.com/products-for-after-effects)
![Mister Horse website showing Animation Composer 3 plugin interface](https://blog.markkulab.net/content/markku/posts/lottie-javascript-interactive-part-2/images/g0yQRDt.png)
- [BodyMovin pitfall guide](https://www.jianshu.com/p/18a7e7c25464)
- [Free online Lottie animation tool from Alibaba](https://design.alipay.com/emotion)
- [Free Lottie animation tool from Alibaba (SVG animations show the most significant gains; raster images see less benefit)](https://design.alipay.com/lolita)
- [Common Lottie gotchas](https://zhuanlan.zhihu.com/p/59794085)
- [Export pitfall guide](https://www.jianshu.com/p/18a7e7c25464)

---

## About this article and its author

Originally published on [Mark Ku's Tech Notes](https://blog.markkulab.net/en/post/lottie-javascript-interactive-part-2)

License: [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) — when reusing or quoting, credit the author and link back to the original

### About the author

**[Mark Ku](https://blog.markkulab.net/en/author/mark-ku)** — Software Solution Provider

- 10+ years senior software engineer, now an AI Builder
- Focused on large-platform architecture — North-American e-commerce, AI SaaS subscription billing
- Combining AI Agents and automation to build evolvable product foundations

### Free tools built by the author

All of these are free to use:

- [Free PDF Sign Tool](https://blog.markkulab.net/en/tools/pdf-sign): Online PDF sign tool — draw, type, or upload a signature, then drag, resize, and download. Everything runs in your browser; nothing is uploaded.
- [VS Code Refactory](https://blog.markkulab.net/en/tools/refactory): Refactory is a VS Code refactoring extension: 34 actions plus a 37-rule code-smell inspection layer with a Code Health dashboard, across 18 languages, backed by 534 tests. It learns your repo's conventions: where interfaces live, where DI is registered, whether 'use client' belongs. It ranks files by git churn × complexity so you know what to fix first, and hands any smell to the Claude Code already on your machine. Free to use, and your source never leaves your computer.
- [DB-Kit Database Manager](https://blog.markkulab.net/en/tools/db-kit): DB-Kit is a lightweight, cross-platform database manager built with Tauri + Rust + React. Manage MySQL, MariaDB, PostgreSQL, SQL Server, Oracle, SQLite, MongoDB, Redis, Kafka, Elasticsearch and RabbitMQ from one consistent interface: passwords encrypted in the OS keychain, SSH tunnels, full CRUD, a visual query builder, stacked multi-statement result sets, cross-connection data transfer and compare/sync, Excel / CSV import & export, visualized execution plans, ER diagrams, scheduled backups, SQL stress testing with p50–p99 latency percentiles, a 15-rule SQL review engine, Kafka message browsing with monitoring & alerts, a bilingual UI (Traditional Chinese / English), a built-in AI assistant (natural-language SQL, AI review and tuning advice) and the dbk CLI. Free and open source (MIT), with installers for Windows, macOS and Linux.
- [VS Code Super Mermaid](https://blog.markkulab.net/en/tools/super-mermaid): Super Mermaid is a VS Code extension for beautiful Mermaid diagrams out of the box: auto-colored live preview, mouse pan & zoom, high-res PNG / SVG export, 21 templates and multiple themes. Free and open source (MIT).
- [React Super Mermaid](https://blog.markkulab.net/en/tools/react-super-mermaid): react-super-mermaid is an open-source React component library: render beautiful Mermaid diagrams with a single <MermaidViewer>, with built-in colorful / sketch themes, pan & zoom, in-diagram search, and high-res SVG / PNG export. Lightweight, SSR-safe, fully typed. Free and open source (MIT).
- [Jira / Confluence Super Mermaid](https://blog.markkulab.net/en/tools/jira-super-mermaid): An Atlassian Forge app: write Mermaid syntax directly inside a Jira issue or a Confluence page and get flowcharts, sequence diagrams, state machines and Gantt charts. 11 diagram types, SVG / PNG export, light and dark themes, full CJK support. Runs on Atlassian: your diagrams live in your own site and the app calls no third-party service. Free, coming soon to the Atlassian Marketplace.
- [Mermaid Live Preview](https://blog.markkulab.net/en/tools/mermaid-preview): Write Mermaid in your browser, see it render instantly, and share the whole diagram as a single link. No sign-up, nothing uploaded to a server, and mermaid.live share links work as-is.
- [React Intl Phone Number](https://blog.markkulab.net/en/tools/react-intl-phone-number): react-intl-phone-number is an open-source React component: framework-agnostic and antd-free, with E.164 in/out, a searchable flag / country-code dropdown, configurable validation levels (strict / mobile-strict / loose), themeable CSS, and i18n — phone logic powered by google-libphonenumber. Lightweight and fully typed. Free and open source (MIT).
- [Uptime Kuma Cluster](https://blog.markkulab.net/en/tools/uptime-kuma-cluster): Turn single-node Uptime Kuma into a highly available cluster: OpenResty + Lua smart load balancing, shared MariaDB state, health checks and automatic failover, plus cluster-management REST APIs. One Docker Compose command to start. Free and open source (MIT).
- [Special Education](https://blog.markkulab.net/en/education): Learning materials crafted for special education students

### Daily podcasts

- [Mark's Tech Insights — Daily AI News](https://blog.markkulab.net/en/category/tech-news): Daily curated AI and tech trends. Catch the latest developments via audio summaries — covering AI applications, software architecture, DevOps, and engineering practice. — RSS: https://blog.markkulab.net/feed.xml
- [AI股市蝦聊](https://blog.markkulab.net/en/category/ai-stock-chat): Every trading day, an AI-analyzed take on the Taiwan stock market, delivered as a two-host conversation covering the session and the next-day outlook. — RSS: https://blog.markkulab.net/ai-stock-chat/feed.xml
- [開源好物週報](https://blog.markkulab.net/en/category/open-source-weekly): A weekly two-host pick of free open-source tools surfaced from real Hacker News, GitHub, and Reddit buzz — what pain they solve and the fastest way to get started. — RSS: https://blog.markkulab.net/open-source-weekly/feed.xml

### Newsletter

[Subscribe to the newsletter](https://blog.markkulab.net/en/subscribe) — Be the first to know about new posts. No spam, unsubscribe anytime.