JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.min.js"></script>

JavaScript

// implement the block animation functionality

var BlockAnimation = (function($) {

  // module aliases
  var Engine = Matter.Engine,
    Render = Matter.Render,
    World = Matter.World,
    Bodies = Matter.Bodies,
    Body = Matter.Body,
    Composite = Matter.Composite,
    Vector = Matter.Vector;

  var winW = window.innerWidth,
    winH = window.innerHeight;

  // variables for where the script looks for the scrolling elements
  var $scrollerContainer = $('section');
  var $scrollEventGenerator = $(window);
  var $nav = $('#aside');
  var $lang = $('.lang-toggle');

  // if an element has this class, the script will put a block for it in the physics world
  var makeBlockClass = 'make-block';
  // if an element has this class in addition to the above class, the script will wrap each
  // line in spans for a more complex typographic layout (instead of making a container for the whole element)
  var decomposeLinesClass = 'decompose-lines';

  var canvas;

  // collision filtering categories
  var defaultCategory = 0x0001,
    noCollideCategory = 0x0002;

  var blockSettings;

  function init(sttgs) {

    blockSettings = sttgs;


    if ($scrollerContainer.length != 0) {

      var engine = initEngine();

      var render = initRenderer(engine);

      if (winW < blockSettings.breakpoint) {
        initBlocks(blockSettings.mobile, engine);
      } else {
        initBlocks(blockSettings.desktop, engine);
        // 				initStaticElements(engine);
      }

      var scrollBlocks = initScroller(engine);

      Engine.run(engine);

      Render.run(render);

      window.onresize = doOnWindowResize.bind(null, scrollBlocks);
    }
  }

  function initEngine() {
    var engine = Engine.create();
    engine.world.gravity.x = engine.world.gravity.y = 0;
    return engine;
  }

  function initRenderer(engine) {
    // make the rendering canvas
    canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');

   ...