OSUblake last won the day on March 8

OSUblake had the most liked content!


  • Content count

  • Joined

  • Last visited

  • Days Won


OSUblake last won the day on March 8

OSUblake had the most liked content!

Community Reputation

6,755 Superhero

About OSUblake

  • Rank

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

14,562 profile views
  1. ModifiersPlugin not working on scale?

    Scale is actually 2 different calculations. var tween = TweenMax.to('.red', 1, { //this value won't matter scale: 2, modifiers: { scaleX: scaleModifier, scaleY: scaleModifier } }); function scaleModifier(scale) { if (scale > 1.5) return 1.5; return scale; }
  2. Move content on canvas background following mouse over

    You figured that out by looking at an Android forum? There's not a lot of people that would be able to make that connection 👏👏👏 2D canvas/graphics libraries are used everywhere, and I do mean everywhere. In fact, everything you're looking at is being generated by one of those libraries. To render the page, all the HTML, CSS, and SVG in the DOM gets reduced down to a bunch of canvas draw calls. What's really interesting, and what you just discovered, is that the HTML5 canvas uses very similar API. For fun, I made a Skia Fiddle to compare code with. Skia is the graphics engine used in Chrome, Firefox, and a bunch of other stuff like Sublime Text. Skia https://fiddle.skia.org/c/edce0208cfe8e7b4d0bf1ba0ac4d6af9 void draw(SkCanvas *canvas) { canvas->clear(SK_ColorBLACK); const int centerX = 400; const int centerY = 400; SkPath rocket; SkParsePath::FromSVGString("M2.35,24.5...", &rocket); SkPaint fillPaint, strokePaint; fillPaint.setAntiAlias(true); strokePaint.setAntiAlias(true); strokePaint.setStrokeWidth(2); strokePaint.setStyle(SkPaint::kStroke_Style); SkColor colors[][2] = { {0x8888ff00, 0xff88ff00}, {0x880088bb, 0xff0088bb} }; SkScalar rotation = 0; for (auto color: colors) { fillPaint.setColor(color[0]); strokePaint.setColor(color[1]); canvas->save(); canvas->translate(centerX, centerY); canvas->rotate(rotation); canvas->scale(3, 3); canvas->drawPath(rocket, fillPaint); canvas->drawPath(rocket, strokePaint); canvas->restore(); rotation -= 90; } } HTML5 Canvas https://codepen.io/osublake/pen/gebqVK function draw(context) { const centerX = 400; const centerY = 400; const rocket = new Path2D("M2.35,24.5..."); // 32-bit RRGGBBAA color const colors = [ ["#88ff0088", "#88ff00ff"], ["#0088bb88", "#0088bbff"] ]; let rotation = 0; context.lineWidth = 2; for (let color of colors) { context.fillStyle = color[0]; context.strokeStyle = color[1]; context.save(); context.translate(centerX, centerY); context.rotate(rotation); context.scale(3, 3); context.fill(rocket); context.stroke(rocket); context.restore(); rotation -= Math.PI / 2; } } Skia uses C++, so there's obviously going to be some syntax differences. Outside of that, the only difference is that Skia uses paint objects to hold style related stuff, like color. That's really nice because you don't have to keep changing the context. I've seen talks about adding paint objects to the HTML5 canvas, but I don't know if it's still being considered. I'll be back later, but check out Path2D. It will let you save a path. See how I'm using it in that demo for the rocket path. https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D
  3. PIXI filters?

    Hi @NDF The PixiPlugin is only configured to work with some of the built-in filters, like blur and color matrix. For all the other filters, you will need to create and animate them directly. The properties for a filter can be found in the filter docs. http://pixijs.io/pixi-filters/docs/index.html For the ShockwaveFilter, the time property is what controls its size. That's the time value used in the shader, and is not related to the time/duration of your animation. var shockwaveFilter = new PIXI.filters.ShockwaveFilter(); someDisplayObject.filters = [shockwaveFilter]; TweenMax.to(shockwaveFilter, 2, { time: 2.5, ease: Linear.easeNone });
  4. Move content on canvas background following mouse over

    I was going to post something else, but I'll do that later. Do you have a demo of what you were working on? I'm curious as to what you were doing. And you really don't have to worry about ending a path as that happens automatically whenever you begin a new path. When to start a new path will depend on what you're doing. For stuff that is logically separate, like particles, they probably shouldn't share a path so they can move independently of each other. If you're making something like a grid, then using the same path shouldn't be problem as the grid could be considered a single unit.
  5. Move content on canvas background following mouse over

    I really haven't tried to do stuff without calling beginPath, but whenever I have forgotten to call it, I can't say that I've ever seen it lockup the browser. Mostly just stuff rendering incorrectly. What kind of stuff were you doing? But I think there's always a path. Like I said, the only way to end a path is to call beginPath. You of course won't see a path unless you stroke or fill it. And some commands will automatically create a new path like rect, strokeRect, and fillRect. A path is really just a collection of vectors, like an array of points, but that doesn't mean that all those vectors are connected to eachother. You could draw thousands of different shapes on the same path by using the moveTo command. If you want to know the rules that canvas uses, you should check out the specs. It explains everything. I would normally never recommend checking out a spec to my worst enemy as some might consider that torture, but I actually like going through the canvas one every couple of months. I seem to always find neat little tricks and algorithms every time I got through it. https://html.spec.whatwg.org/multipage/canvas.html cont....
  6. How do I use TimeLineMax in Angular5+ and Typescript

    I have no idea what your code is targeting. Try making a demo on StackBlitz of what you're trying to do. Just add GSAP as a dependency. https://stackblitz.com/
  7. GSDevTools with npm, Webpack and Vuejs 2.x

    Yep. A build process will create all the distributable files that will work with scripts tags, so nothing should be different on that end. I'm not suggesting this for your build process, but one thing I really like about jsDelivr is that you can load any package from npm or github. It doesn't matter if the package has no distributable files, has dependencies on external libraries, or is written is some super future version of JavaScript, it will automatically bundle, compile, and minify everything for you. I'm bringing this up because it should be pretty easy to do, and could even be automated by a CDN if you were super lazy. I have no idea what's going on there. What's weird is that the first thing I did was move the block of code where you create the exports to the very bottom of the file and it didn't work. It would seem that that should have the same effect as moving the Draggable code to the top of the file. Maybe it's using some type of abstract syntax tree (AST) to trace the code, and knows Draggable is a dependency so it needs to be parsed first. http://resources.jointjs.com/demos/javascript-ast No. ES modules are a real thing, but nobody actually uses them in the browser. ES imports/exports get converted to CommonJS and AMD declarations in the build process, so CommonJS/AMD will be the actual output. Then why do you need to use ES module? Because ES modules are treated differently, and allow for optimizations like tree-shaking. But the big thing I've noticed is that all these CLI tools that people are using for stuff like React, Vue, and Angular treat everything outside of the node_modules folder as an ES module. That's why people have been having trouble importing member plugins from other folders in their project. The "gsap/FILE" syntax seems to have fixed most of those problems, but you shouldn't have to change anything. You just need to instruct people to install from the folder or a repo instead of the hosted package on npm. Installing from a folder or repo uses what's inside of it as the source, and copies everything to the node_modules folder. It will look and function exactly like the hosted package on npm. I don't think people realize that npm can install from practically any source. You can even symlink folders. https://docs.npmjs.com/cli/link Everything is in my head at the moment, so I don't have a demo, but I have pretty good idea of how this could work.
  8. I've seen you and other people mention that, but I couldn't figure it out. It opens up a window like a typical file save as, so I never hit the export button because it looked like it was just going to save it and then close the window. I didn't realize that pressing export button will open up another window. I've always copied and pasted, which is fine for smaller graphics. It adds some underscores and numbers to the IDs, but the markup is formatted, and usually pretty easy to cleanup by hand. But now I won't have to do that, so thanks!
  9. GSDevTools with npm, Webpack and Vuejs 2.x

    @GreenSock I see the problem. It's the Draggable code in the GSDevTools file. It either needs to be at the top of the file, or removed completely and added as a dependency. All these import problems can be fixed in the next update with a little work. No need to wait to for v2. Replace all the commonJS and AMD declarations with ES6 imports/exports. Break up the TweenMax file. And make the members download folder a flat directory with all the files, complete with a package.json so it can be easily installed as a local folder or repo. @naaadz and @AngusSimons The easiest thing for now is to probably just edit the GSDevTools file. Find this part of the code on around line 1200... (function(name) { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope)[name]; }; if (typeof(module) !== "undefined" && module.exports) { //node require("gsap/TweenLite"); require("gsap/TimelineLite"); require("gsap/CSSPlugin"); module.exports = getGlobal(); } else if (typeof(define) === "function" && define.amd) { //AMD define(["gsap/TweenLite", "gsap/TimelineLite", "gsap/CSSPlugin"], getGlobal); } }("GSDevTools")); Add the dependencies for Draggable... (function(name) { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope)[name]; }; if (typeof(module) !== "undefined" && module.exports) { //node require("gsap/TweenLite"); require("gsap/TimelineLite"); require("gsap/CSSPlugin"); require("gsap/Draggable"); module.exports = getGlobal(); } else if (typeof(define) === "function" && define.amd) { //AMD define(["gsap/TweenLite", "gsap/TimelineLite", "gsap/CSSPlugin", "gsap/Draggable"], getGlobal); } }("GSDevTools")); And then delete everything below it. It should work after that.
  10. Move content on canvas background following mouse over

    Your videos will be helpful to somebody. Even if you don't get any feedback, that doesn't mean it wasn't helpful to somebody.
  11. GSDevTools with npm, Webpack and Vuejs 2.x

    Can you post or send me your project so I can see what's going on?
  12. GSDevTools with npm, Webpack and Vuejs 2.x

    You should see Draggable in utils and GSDevTools at the top. Try importing everything without names. You'll still be able to use everything. import "gsap"; import "gsap/Draggable"; import "gsap/GSDevTools";
  13. GSDevTools with npm, Webpack and Vuejs 2.x

    What do you see when you log this out? console.log(window.com.greensock) Make sure you're using the file from the "bonus-files-for-npm-users", and you put it in the root of the folder. Now try importing stuff without a name. import 'gsap'; import 'gsap/GSDevTools';
  14. Page Transitions -- Would this approach work ?

    And if you don't use jQuery, you can use XHR or Fetch. https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
  15. Page Transitions -- Would this approach work ?

    The jQuery example I showed in that other thread is probably the simplest solution. Basically you load up an html snippet, and in the callback you animate the old content out, and the new content in. Usually helps if you position the content absolutely inside a container. <main style="position:relative"> <section id="old-content" style="position:absolute">Old Stuff</section> <section id="new-content" style="position:absolute">New Stuff</section> </main> $.get("new-content.html", function(data) { // Add new-content html $("main").append(data); // Out with the old TweenLite.to("#old-content", 1, { autoAlpha: 0, onComplete: function() { $("#old-content").remove(); } }); // In with the new TweenLite.from("#new-content", 1, { autoAlpha: 0 }); });