Merge pull request #84 from rtalon83/gh-pages

Added tint examples

examples/js/gsap2-interaction/gsap2-tint.js

@@ -0,0 +1,55 @@
+// Note: In this example we have two "requestAnimationFrame", PIXI + gsap.
+// gsap coordinate his animations (bunnies).
+
+// GSAP documentation: https://greensock.com/docs/v2/Plugins/PixiPlugin
+
+const app = new PIXI.Application({
+    width: 800,
+    height: 600,
+    backgroundColor: 0x1099bb,
+});
+
+document.body.appendChild(app.view);
+
+// Create a new texture
+const texture = PIXI.Texture.from('examples/assets/bunny.png');
+
+// time animation in seconds
+const time = 2.0;
+
+const bunny1 = new PIXI.Sprite(texture);
+bunny1.scale.set(3.0, 3.0);
+bunny1.anchor.set(0.5, 0.5);
+bunny1.x = app.screen.width / 4;
+bunny1.y = app.screen.height / 2;
+
+app.stage.addChild(bunny1);
+
+TweenMax.to(bunny1, time, {
+    pixi: { tint: 'red' }, repeat: -1, yoyo: true,
+});
+
+const bunny2 = new PIXI.Sprite(texture);
+bunny2.scale.set(3.0, 3.0);
+bunny2.anchor.set(0.5, 0.5);
+bunny2.x = 2 * app.screen.width / 4;
+bunny2.y = app.screen.height / 2;
+
+app.stage.addChild(bunny2);
+
+TweenMax.to(bunny2, time, {
+    pixi: { tint: '#00FF00' }, repeat: -1, yoyo: true,
+});
+
+const bunny3 = new PIXI.Sprite(texture);
+bunny3.scale.set(3.0, 3.0);
+bunny3.anchor.set(0.5, 0.5);
+bunny3.x = 3 * app.screen.width / 4;
+bunny3.y = app.screen.height / 2;
+
+app.stage.addChild(bunny3);
+
+TweenMax.to(bunny3, time, {
+    pixi: { tint: 'rgb(0,0,255)' }, repeat: -1, yoyo: true,
+});
+

examples/js/gsap3-interaction/gsap3-tint.js

@@ -0,0 +1,55 @@
+// Note: In this example we have two "requestAnimationFrame", PIXI + gsap.
+// gsap coordinate his animations (bunnies).
+
+// GSAP documentation: https://greensock.com/docs/v3/Plugins/PixiPlugin
+
+const app = new PIXI.Application({
+    width: 800,
+    height: 600,
+    backgroundColor: 0x1099bb,
+});
+
+document.body.appendChild(app.view);
+
+// Create a new texture
+const texture = PIXI.Texture.from('examples/assets/bunny.png');
+
+// time animation in seconds
+const time = 2.0;
+
+const bunny1 = new PIXI.Sprite(texture);
+bunny1.scale.set(3.0, 3.0);
+bunny1.anchor.set(0.5, 0.5);
+bunny1.x = app.screen.width / 4;
+bunny1.y = app.screen.height / 2;
+
+app.stage.addChild(bunny1);
+
+gsap.to(bunny1, {
+    pixi: { tint: 'red' }, duration: time, repeat: -1, yoyo: true,
+});
+
+const bunny2 = new PIXI.Sprite(texture);
+bunny2.scale.set(3.0, 3.0);
+bunny2.anchor.set(0.5, 0.5);
+bunny2.x = 2 * app.screen.width / 4;
+bunny2.y = app.screen.height / 2;
+
+app.stage.addChild(bunny2);
+
+gsap.to(bunny2, {
+    pixi: { tint: '#00FF00' }, duration: time, repeat: -1, yoyo: true,
+});
+
+const bunny3 = new PIXI.Sprite(texture);
+bunny3.scale.set(3.0, 3.0);
+bunny3.anchor.set(0.5, 0.5);
+bunny3.x = 3 * app.screen.width / 4;
+bunny3.y = app.screen.height / 2;
+
+app.stage.addChild(bunny3);
+
+gsap.to(bunny3, {
+    pixi: { tint: 'rgb(0,0,255)' }, duration: time, repeat: -1, yoyo: true,
+});
+

examples/manifest.json

@@ -496,36 +496,44 @@
             "title": "GSAP 2 Tick Director",
             "entry": "gsap2-tick.js",
             "plugins": [
-                "gsap3/TweenMax.min"
+                "gsap/gsap2/TweenMax.min"
             ]
         },
         {
             "title": "GSAP 2 Random Draw",
             "entry": "gsap2-random-draw.js",
             "plugins": [
-                "gsap3/TweenMax.min"
+                "gsap/gsap2/TweenMax.min"
             ]
         },
         {
             "title": "GSAP 2 Basic Examples",
             "entry": "gsap2-basic.js",
             "plugins": [
-                "gsap3/TweenMax.min"
+                "gsap/gsap2/TweenMax.min"
             ]
         },
         {
             "title": "GSAP 2 Filters",
             "entry": "gsap2-filters.js",
             "plugins": [
-                "gsap3/TweenMax.min",
-                "gsap3/PixiPlugin.min"
+                "gsap/gsap2/TweenMax.min",
+                "gsap/gsap2/PixiPlugin.min"
             ]
         },
         {
             "title": "GSAP 2 Trail",
             "entry": "gsap2-trail.js",
             "plugins": [
-                "gsap3/TweenMax.min"
+                "gsap/gsap2/TweenMax.min"
+            ]
+        },
+        {
+            "title": "GSAP 2 Tint",
+            "entry": "gsap2-tint.js",
+            "plugins": [
+                "gsap/gsap2/TweenMax.min",
+                "gsap/gsap2/PixiPlugin.min"
             ]
         }
     ],
@@ -534,35 +542,43 @@
             "title": "GSAP 3 Tick Director",
             "entry": "gsap3-tick.js",
             "plugins": [
-                "gsap3/gsap.min"
+                "gsap/gsap3/gsap.min"
             ]
         },
         {
             "title": "GSAP 3 Random Draw",
             "entry": "gsap3-random-draw.js",
             "plugins": [
-                "gsap3/gsap.min"
+                "gsap/gsap3/gsap.min"
             ]
         },
         {
             "title": "GSAP 3 Basic Examples",
             "entry": "gsap3-basic.js",
             "plugins": [
-                "gsap3/gsap.min"
+                "gsap/gsap3/gsap.min"
             ]
         },
         {
             "title": "GSAP 3 Filters",
             "entry": "gsap3-filters.js",
             "plugins": [
-                "gsap3/gsap.min"
+                "gsap/gsap3/gsap.min"
             ]
         },
         {
             "title": "GSAP 3 Trail",
             "entry": "gsap3-trail.js",
             "plugins": [
-                "gsap3/gsap.min"
+                "gsap/gsap3/gsap.min"
+            ]
+        },
+        {
+            "title": "GSAP 3 Tint",
+            "entry": "gsap3-tint.js",
+            "plugins": [
+                "gsap/gsap3/gsap.min",
+                "gsap/gsap3/PixiPlugin.min"
             ]
         }
     ]