JSFiddle - React, Tailwind, and code Playground

by qhoc

HTML

<link rel="stylesheet" href="https://rawgit.com/jperl/famous-compiled/e9c12b1fa657820d3f9bad093ea72e8ee2dfec46/dist/lib/famous/core/famous.css">
<script src="http://rawgit.com/jperl/famous-compiled/e9c12b1fa657820d3f9bad093ea72e8ee2dfec46/dist/src/4f231991.polyfills.js"></script>
<script src="https://rawgit.com/jperl/famous-compiled/97f85aaa64af255adfe0407c941e0e859b0759bc/dist/src/804b0adb.main.js"></script>

JavaScript

Famous.loaded(function () {
    var Engine = Famous.Core.Engine;
    var Surface = Famous.Core.Surface;
    var Modifier = Famous.Core.Modifier;
    var Transform = Famous.Core.Transform;
    var StateModifier = Famous.Modifiers.StateModifier;
    var Easing = Famous.Transitions.Easing;

    var mainContext = Engine.createContext();
    mainContext.setPerspective(1000);
    
var stateModifier = new StateModifier({
  transform: Transform.translate(100, 100, 0)
});
var stateModifier1 = new StateModifier();
    
var surface = new Surface({
  size: [100, 100],
  properties: {
    backgroundColor: '#FA5C4F'
  }
});

mainContext.add(stateModifier).add(stateModifier1).add(surface);

/*stateModifier1.setTransform(
  Transform.rotate(0, 1, 0),
  {duration: 2000}
);*/
    
stateModifier.setTransform(
  Transform.multiply(stateModifier.getTransform(), Transform.rotate(0, 1, 0)),
  {duration: 2000}
);

});