Svgaplayer Web

Similar to Lottie. Render After Effects / Animate CC (Flash) animations natively on Android and iOS, Web. 使用 SVGAPlayer 在 Android、iOS、Web中播放 After Effects / Animate CC (Flash) 动画。
Alternatives To Svgaplayer Web
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Aos22,1268401016 months ago22October 03, 2018315mitJavaScript
Animate on scroll library
Popmotion19,2734842044 months ago65November 14, 201943JavaScript
Simple animation libraries for delightful user interfaces
Vivus14,25415630a year ago15April 17, 202113mitJavaScript
JavaScript library to make drawing animation on SVG
Material Animations13,282
4 years ago19mitJava
Android Transition animations explanation with examples.
Dynamics.js7,248155474 years ago13August 27, 201610CoffeeScript
Javascript library to create physics-based animations
268 months ago20November 23, 202010mitSwift
ViewAnimator brings your UI to life with just one line
React Move6,521323595 months ago60June 13, 202125mitJavaScript
React Move | Beautiful, data-driven animations for React
Animateplus5,45286205 years ago12May 04, 20181mitJavaScript
A+ animation module for the modern web
Walkway4,38974a year ago8June 24, 20184mitJavaScript
An easy way to animate SVG elements.
Ticker4,1764712 years ago12November 11, 202115apache-2.0Java
An Android text view with scrolling text change animation
Alternatives To Svgaplayer Web
Select To Compare

Alternative Project Comparisons


本仓库已经停止维护,你仍然继续阅读源码及创建分叉,但本仓库不会继续更新,也不会回答任何 issue。

This repo has stopped maintenance, you can still continue to read the source code and create forks, but this repo will not continue to be updated, nor will it answer any issues.


Language: 中文

SVGAPlayer 现已支持在微信小程序播放动画,详情请参阅


  1. 轻点 GitHub Star,让更多人看到该项目。


Can I Use

SVGAPlayer 2.0.0 only supports below browsers.

  • Edge / IE 6+
  • Safari / Chrome
  • iOS 6.0+ / Android 4.0+

SVGAPlayer 2.0.0 also supports below Game Engines.


Prebuild JS

  1. Add <script src="[email protected]/build/svga.min.js"></script> to your.html


  1. npm install svgaplayerweb --save
  2. Add require('svgaplayerweb') to xxx.js

IE6 ~ IE9

  • IE6+ only supports 2.x format.
  • You couldn't use npm to install SVGA library.
  1. Add SVGAPlayerWeb.swf to your.html locate directory.
  2. Add following code to your.html
<!--[if lt IE 10]> 
    <script src="../build/"></script>
<!--[if gte IE 10]><!-->
    <script src="../build/svga.min.js"></script>

Audio support

If your need to play audios, add howler.min.js to your html.

<script src="[email protected]/dist/howler.core.min.js"></script>

Notice: audio plays needs browser support, some browser requires user interaction before playing.

SVGA-Format 1.x support

Both Prebuild & NPM, if you need to support SVGA-Format 1.x, add JSZip script to html.

<script src="//,jszip-utils.min.js" charset="utf-8"></script>


Load Animation Mannally

You may create Player and Parser by yourself.

  1. Add Div Tag.
<div id="demoCanvas" style="styles..."></div>
  1. Load Animation
var player = new SVGA.Player('#demoCanvas');
var parser = new SVGA.Parser('#demoCanvas'); // Must Provide same selector eg:#demoCanvas IF support IE6+
parser.load('rose_2.0.0.svga', function(videoItem) {

Load Animation Automatically

Assign canvas element properties as below.

<div src="rose_2.0.0.svga" loops="0" clearsAfterStop="true" style="styles..."></div>

Animation will play after Web-Page onload.

Replace Animation Images Dynamically

You can replace specific image by yourself, ask your designer tell you the ImageKey.

player.setImage('', 'ImageKey');

Add Text on Animation Image Dynamically

You can add text on specific image, ask your designer tell you the ImageKey.

player.setText('Hello, World!', 'ImageKey');
    text: 'Hello, World!', 
    family: 'Arial',
    size: "24px", 
    color: "#ffe0a4",
    offset: {x: 0.0, y: 0.0}
}, 'ImageKey'); // customize text styles.



You use SVGA.Player controls animation play and stop.


  • int loops; - Animation loop count, defaults to 0 means infinity loop.
  • BOOL clearsAfterStop; - defaults to true, means player will clear all contents after stop.
  • string fillMode; - defaults to Forward,optional Forward / Backward,fillMode = Forward,Animation will pause on last frame while finished,fillMode = Backward , Animation will pause on first frame.


  • constructor (canvas); - first params could be '#id' or CanvasHTMLElement
  • startAnimation(reverse: boolean = false); - start animation from zero frame.
  • startAnimationWithRange(range: {location: number, length: number}, reverse: boolean = false); - start animation in [location, location+length] frame range.
  • pauseAnimation(); - pause animation on current frame.
  • stopAnimation(); - stop animation, clear contents while clearsAfterStop === true
  • setContentMode(mode: "Fill" | "AspectFill" | "AspectFit"); - Specific Scale Mode
  • setClipsToBounds(clipsToBounds: boolean); - Clips if image render out of box.
  • clear(); - force clear contents.
  • stepToFrame(frame: int, andPlay: Boolean); - stop to specific frame, play animation while andPlay === true
  • stepToPercentage(percentage: float, andPlay: Boolean); - stop to specific percentage, play animation while andPlay === true
  • setImage(image: string, forKey: string, transform: [a, b, c, d, tx, ty]); - Replace Animation Images Dynamically, transform is optional, transform could adjust replacing image.
  • setText(text: string | {text: string, family: string, size: string, color: string, offset: {x: float, y: float}}, forKey: string); - Add Text on Animation Image Dynamically
  • clearDynamicObjects(); - clear all dynamic objects.

Callback Method

  • onFinished(callback: () => void): void; - call after animation stop.
  • onFrame(callback: (frame: number): void): void; - call after animation specific frame rendered.
  • onPercentage(callback: (percentage: number): void): void; - call after animation specific percentage rendered.


You use SVGA.Parser load VideoItem from remote or Base64 string.

Only Cross-Domain allow files could be loaded.

If you eager to load resources from Base64 or File, deliver as load(File) or load('data:svga/2.0;base64,xxxxxx').


  • constructor();
  • load(url: string, success: (videoItem: VideoEntity) => void, failure: (error: Error) => void): void;


Android 4.x Breaks

As known, some Android OS lack Blob support, add Blob Polyfill by yourself.

<script src="//"></script>
Popular Animation Projects
Popular Animate Projects
Popular User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Play Framework