Master Web Animations for Mobile: Tools, Tips, and Code Examples

When developing mobile projects, especially activity pages, animation is inevitable. Good animations add value to the product. This article summarizes common web animation implementation methods, aiming to help readers master animation development techniques and confidently meet designers' requirements.

Toolbox

There are many ways to implement web animations, commonly GIF/APNG, CSS3, JavaScript, Lottie, SVG, Canvas, etc. Choosing the appropriate method in a project requires balancing implementation cost and runtime efficiency. For animations that need extensive control, use JavaScript or Lottie; otherwise, CSS3 and GIF/APNG are sufficient.

APNG

Among the animation methods, GIF/APNG is the most effortless. Compared with GIF, APNG has advantages (see this article). Simple scenarios can also use APNG with setTimeout for flow control. However, be aware of the following issues when using it:

APNG preloading – APNG files are usually large, so preload them.

APNG non-looping – Cached APNG images may not replay when displayed again. Adding a query parameter to the URL forces reload. (Codepen example)

CSS3

Most projects already make extensive use of CSS3 animations; transition and animation are powerful tools. Common transition effects can be achieved with CSS. If you need inspiration, check Animate.css or Animista.net for ready-made solutions.

Tips

animation-fill-mode – Use animation-fill-mode: forwards; to keep the final state after the animation ends.

steps function in animation-timing-function – The steps() function can create frame-by-frame animation effects, useful for simple countdowns. (Codepen example)

clip-path – The clip-path property controls the visible region of an element. While overflow: hidden; can achieve similar effects, it requires more code and cannot clip polygons.

Animation performance – Prefer using transform and, when needed, will-change. For many DOM elements, consider Canvas instead of CSS.

Vue encapsulation

Vue provides transition and transition-group components, offering a unified API for transitions and animations. Two Vue transition features worth noting:

mode – Allows simultaneous enter and leave transitions.

transition-group – Enables animating multiple elements, such as a marquee in mobile scenarios. (Codepen example)

Lottie, SVG

For complex animations, Lottie is recommended; After Effects can export Lottie JSON files. Using Lottie is straightforward: import the JSON file to create the animation.

import lottie from 'Lottie-web';
import animData from './animData.json';

const anim = lottie.loadAnimation(animData);

With the lottie-api you can even edit existing animations. (Codepen example)

Lottie plays animations via JavaScript, allowing precise control over speed, repetitions, frames, and order. Refer to the official documentation for events and methods.

Notes

If a Lottie JSON file references image assets, adjust the image paths to avoid 404 errors. Tools like lottie-loader can automate this; with lottie-loader you can treat the JSON file as a component.

// Use JSON as a Vue component
import MyAnimate from './data.json';

export default {
  components: { MyAnimate },
};

Lottie JSON field meanings

The official Lottie docs do not describe each JSON field; you can find schemas in the codebase. Below are brief descriptions of some fields:

{
  "fr": 20,        // frames per second
  "ip": 0,         // start frame
  "op": 40,        // end frame
  "w": 700,        // width of animation area
  "h": 500,        // height of animation area
  "assets": [{
    // image asset – edit to avoid 404
    "w": 120,
    "h": 120,
    "u": "images/",
    "p": "img_0.png"
  }]
}

From fr, ip, and op you can infer that one animation cycle lasts 2 seconds. Using setSeed(2) reduces playback time to 1 second; play(frame) or goToAndPlay(frame) can start playback from a specific frame.

lottie-loader works by fixing image paths in the assets array.

Animation practice guide

With the tools mentioned above, simple animations are easy. For slightly more complex animations, write the logic in JavaScript. The example below demonstrates the implementation approach.

The image is large; click to preview the effect.

The core logic centers on “red packets”. Packets have stop and pause states, new packets drop from the top at a certain frequency, and out‑of‑view packets are removed. During movement, packets rotate. To keep the code flexible, we use data abstraction and process abstraction.

// Animation area
class Stage {
  // ...
  children: Packet[];
  duration: number;
  destroyed: boolean;
}

class Packet {
  x: number;
  y: number;
  degree: number;
  rotation: 'clockwise' | 'anticlockwise';
  status: 'idle' | 'moving' | 'removed';
}

Process abstraction treats each animation as a task described by an async function.

class Stage {
  init() {}

  // Add new packets at a certain frequency
  async add() {
    while (true) {
      if (this.destroyed) return;
      await wait(200);
      // animation logic ...
    }
  }

  // Similar to add, moves packets and cleans up
  async animateAndClear() {}
}

class Packet {
  // Set stop
  stop() {}
}

After these steps, the animation logic is abstracted; the view layer can be implemented using Vue or Canvas.

State reuse and component abstraction

React and Vue 3 both support hooks; reusable logic (hooks) can be shared across components. With rich component libraries, most business logic deals with data. Below is a simple hook‑based animation example using React Spring.

Hook and animation

The Vue example can be implemented with a React Spring hook as follows:

import { useTransition, animated } from 'react-spring';

export default function App() {
  // ...
  const transitions = useTransition(show, null, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 },
  });

  return <div>...</div>;
}

Full code example.

By defining initial and final states and binding them to the view, the animation is completed, offering convenience comparable to CSS3. In Vue we rely on the transition component; React Spring provides the state, leaving rendering to you.

Future encapsulation could involve:

Abstract transition state into a hook and export it.

Build a component based on the hook for users.

Learning hooks helps you think about data abstraction and state management.

Topics not covered

This article focuses on simple web animations. For more complex scenarios like HTML5 games, consider using Pixi.js or Phaser for performance and development efficiency.

Conclusion

Enrich your toolbox and master more tools.

Decompose requirements, abstract data and processes to improve maintainability.

Learn hooks and consider how to reuse state logic.