JSFiddle - React, Tailwind, and code Playground

by lonewolfs

HTML

<div id="horandvert"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>
    <script defer="defer">
      var stage = new Kinetic.Stage({
        container: 'horandvert',
        width: 940,
        height: 600
      });
      var layer = new Kinetic.Layer();
        
      var hbox = new Kinetic.Text({
        x: 50,
        y: 240,
        fontSize: 38,
        fontFamily: 'Calibri',
        text: 'Horizontal',
        fill: '#317d37',
        padding: 0,
      });

      var vbox = new Kinetic.Text({
        x: 330,
        y: 50,
        fontSize: 38,
        fontFamily: 'Calibri',
        text: 'Vertical',
        fill: '#317d37',
        padding: 0,
      });

      layer.add(hbox);
      layer.add(vbox);
      stage.add(layer);
      
      var amplitude = 400;
      var period = 3000;

      var anim = new Kinetic.Animation(function(frame) {
      hbox.setX (amplitude * Math.sin(frame.time * 1 * Math.PI / period)); 
      vbox.setY(amplitude * Math.sin(frame.time * 1 * Math.PI / period));
      }, layer);

      anim.start();      
    </script>

CSS

#horandvert{width:940px;height:600px;overflow:hidden;position:relative;margin:0 auto;padding:0;background: #f4f4f4;}