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

Thumbnail
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 Codepen.io
Copyright airnan ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

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

  
</head>

<body>

  <div id="bodymovin"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.4.3/pixi.min.js'></script>
<script src='https://labs.nearpod.com/bodymovin/demo/pixi/bodymovin.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/airnan/after-effects-to-pixijs-yapJWq */
#bodymovin {
  background-color: #ccc;
  width: 910px;
  height: 138px;
  transform: translate3d(0, 0, 0);
}

/*Downloaded from https://www.codeseek.co/airnan/after-effects-to-pixijs-yapJWq */
var anim;
var animData = {
  container: document.getElementById('bodymovin'),
  renderer: 'pixi',
  loop: true,
  autoplay: true,
  autoloadSegments: true,
  rendererSettings: {
    progressiveLoad: false
  },
  path: 'https://labs.nearpod.com/bodymovin/demo/pixi/bm_pixi.json'
};
anim = bodymovin.loadAnimation(animData);

Comments