After Effects to PIXI.js

In this example below you will see how to do a After Effects to PIXI.js with some HTML / CSS and Javascript

trying the new PIXI renderer on top is the svg renderer bottom is the pixi renderer

This awesome code was written by airnan, you can see more from this user in the personal repository.
You can find the original code on
Copyright airnan ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>After Effects to PIXI.js</title>
      <link rel="stylesheet" href="css/style.css">



  <div id="bodymovin"></div>
  <script src=''></script>
<script src=''></script>


    <script  src="js/index.js"></script>



/*Downloaded from */
#bodymovin {
  background-color: #ccc;
  width: 910px;
  height: 138px;
  transform: translate3d(0, 0, 0);

/*Downloaded from */
var anim;
var animData = {
  container: document.getElementById('bodymovin'),
  renderer: 'pixi',
  loop: true,
  autoplay: true,
  autoloadSegments: true,
  rendererSettings: {
    progressiveLoad: false
  path: ''
anim = bodymovin.loadAnimation(animData);