GSAP Pixi Plugin

In this example below you will see how to do a GSAP Pixi Plugin with some HTML / CSS and Javascript

PixiPlugin test.

Thumbnail
This awesome code was written by osublake, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright osublake ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>GSAP Pixi Plugin</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <canvas id="stage"></canvas>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.4.4/pixi.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/PixiPlugin.min.js?r=3'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/osublake/gsap-pixi-plugin-qmXPMm */
body {
  background: #000;
}

#stage {
  position: fixed;
}


/*Downloaded from https://www.codeseek.co/osublake/gsap-pixi-plugin-qmXPMm */

var baseUrl = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/";

var vw = window.innerWidth;
var vh = window.innerHeight;

var app = new PIXI.Application(vw, vh, {
  view: document.getElementById("stage"),
  resolution: window.devicePixelRatio || 1,
  backgroundColor: 0x000000,
  antialias: true,
  autoResize: true
});

var loader = new PIXI.loaders.Loader(baseUrl)
  .add("bubble", "bubble256.png?v=1")
  .add("rain", "thalion-rain.png?v=1")
  .add("displacement", "displacementmap.png?v=1")
  .load(init);

function init(loader, resources) {
    
  var rainTexture = resources.rain.texture;
  var bubbleTexture = resources.bubble.texture;
  var displacementTexture = resources.displacement.texture;
  
  var background = new PIXI.TilingSprite(rainTexture, vw, vh);
  
  var bubble1 = new PIXI.Sprite(bubbleTexture);
  var bubble2 = new PIXI.Sprite(bubbleTexture);
    
  var bubbleContainer1 = new PIXI.Container();
  var bubbleContainer2 = new PIXI.Container();
  
  var displacementSprite1 = new PIXI.Sprite(displacementTexture);
  var displacementSprite2 = new PIXI.Sprite(displacementTexture);
  
  var displacementFilter1 = new PIXI.filters.DisplacementFilter(displacementSprite1);
  var displacementFilter2 = new PIXI.filters.DisplacementFilter(displacementSprite2);
  
  bubbleContainer1.addChild(displacementSprite1, bubble1);
  bubbleContainer2.addChild(displacementSprite2, bubble2);
      
  TweenLite.set([bubbleContainer1, bubbleContainer2], { x: vw / 2, y: vh / 2 });
  TweenLite.set([displacementSprite1, displacementSprite2], { pixi: { scale: 0.625 }});    
  TweenLite.set([displacementSprite1, displacementSprite2, bubble1, bubble2], { pixi: { anchor: 0.5 }});  
  
  displacementFilter1.scale.set(20);
  displacementFilter2.scale.set(100);
  
  app.stage.addChild(background, bubbleContainer1, bubbleContainer2);
  
  app.stage.filters = [
    displacementFilter1,
    displacementFilter2
  ];
  
  TweenMax.to(background, 7, {
    pixi: { tilePositionX: -rainTexture.width },
    ease: Sine.easeInOut,
    repeat: -1,
    yoyo: true
  });
  
  TweenMax.to(background, 12, {
    pixi: { tilePositionY: rainTexture.height * 5 },
    ease: Sine.easeInOut,
    repeat: -1,
    yoyo: true
  });
  
  var tl = new TimelineMax({ repeat: -1, repeatDelay: 0.5, yoyo: true })
    .to(bubble1, 6, { pixi: { rotation: 360 }, ease: Sine.easeInOut }, 0.5)
    .to(bubbleContainer1, 6, { pixi: { x: 125, y: 125, scale: 0.6 }, ease: Sine.easeInOut }, 0.5)
    .to(displacementFilter1, 5, { pixi: { scale: 40 }, ease: Sine.easeInOut}, 1.5);  
  
  window.addEventListener("resize", function() {
    
    vw = background.width = window.innerWidth;
    vh = background.height = window.innerHeight;
    app.renderer.resize(vw, vh);
  });
}

Comments