OSUblake last won the day on May 17

OSUblake had the most liked content!


  • Content count

  • Joined

  • Last visited

  • Days Won


OSUblake last won the day on May 17

OSUblake had the most liked content!

Community Reputation

4,182 Excellent


About OSUblake

  • Rank

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

11,299 profile views
  1. Yeah, I said they are listed under "gsap" now. I don't have PhpStorm/WebStorm anymore, so I don't know how well those TypeScript definitions will work for you, but there are known issues with them.
  2. Don't know why this isn't documented, but add this to your vars object. Draggable.create(foo, { allowEventDefault: true });
  3. Just noticed how you can create your own selective quality mask. Very nice! I think I need to redo a lot of my assets now. Any advice on compressing a sprite sheet? Would it be better to do each image individually, or just compress the spritesheet? For the typed array stuff... that can get confusing as the endianness of the processor determines the order of the rgba values. Parts of this script might help you out. It's from ZorroSVG, which does something similar to your transparent jpg trick, but with an svg mask. https://github.com/Quasimondo/QuasimondoJS/blob/master/zorrosvg/js/zorrosvgmaskmaker.js Some other SO links on the issue. https://stackoverflow.com/questions/19499500/canvas-getimagedata-for-optimal-performance-to-pull-out-all-data-or-one-at-a https://stackoverflow.com/questions/39213661/canvas-using-uint32array-wrong-colors-are-being-rendered
  4. @Carl I have always wondered what that was for. Please add that example to the docs.
  5. As long as JavaScript is available, you should be able to use the transparent jpg wherever. When the image loads, it creates a canvas and does some pixel manipulation. And speaking of pixel manipulation, would the transparent jpg script run a little faster using a typed array? Probably needs a check for older browsers though. https://jsperf.com/canvas-pixel-manipulation/8
  6. You can listen for a popstate event... window.addEventListener("popstate", function(event) { // handle change }); But animating page transitions can be a little more complicated than that article lets on. There's a lot of factors involved, and it might be better to use a library designed to handle routing. For really simple routing, you might want to check out smoothstate.js. I've never used it, and it doesn't look like the project has been updated recently, but I remember seeing this thread on how to use it with GSAP. Anything more complicated than that, and you'll probably need to look into using a SPA framework. Here's a really simple routing example using AngularJS. http://embed.plnkr.co/UOp1ZD/
  7. HOLY CRAP!!! That transparent jpg trick is amazing. It reduced this image from 2.19MB to 363k. One note, I had to add a crossorigin="anonymous" attribute to get it to work with assets hosted on CodePen.
  8. In general, I would say no. In a SPA, you usually build the DOM based on some data, but not as granular as your settings object. For example, look at the data object used in this demo. The DOM is constructed from 3 simple properties defined in each data object. SPAs can be incredibly difficult to build and manage. I would recommend using a framework if you're new to SPA development. Some popular ones include AngularJS, Angular, Vue, React, and Polymer.
  9. Creating animations in a scroll event is generally a bad idea, and may result in unexpected behavior, which is probably what's going on with your animation. Here's a better way to do that. I'm using requestAnimationFrame() to throttle the updates, which calls a function to change the reversed state of the animation. It could be optimized a little more. For example, there's no reason to change the state of the animation if the scroll position is at 5000px, and you only need to toggle it at 200px, but it should help you get started.
  10. Isn't that like a catch-22, or something? Nobody will request it because they don't know it exists. One idea would be to setup some CodePens for unsupported GSAP experiments? Give people a chance to play around with stuff and test the waters, without officially supporting it. Just a thought.
  11. You can tell it what to do onRepeat.
  12. Somebody tried making a Chrome extension to debug SVG paths, but it doesn't work that well. https://github.com/winkerVSbecks/xvg
  13. Opening up the path editor would be HUGE!!! It's hard to understand motion paths without seeing the actual path. And being able to edit an existing path in the browser would be even better. Kind of like this paper example... http://paperjs.org/examples/hit-testing/
  14. You still working on this?
  15. For a good look at how to do parallax with GSAP, check out this tutorial by CJ Gammon... http://blog.cjgammon.com/parallax-5 This post has a link to all the tutorials. http://blog.cjgammon.com/parallax-6