OSUblake last won the day on January 17

OSUblake had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


OSUblake last won the day on January 17

OSUblake had the most liked content!

Community Reputation

9,184 Superhero

About OSUblake

  • Rank

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

17,125 profile views
  1. OSUblake

    Draggable slider breaks on resize

    getBoundingClientRect is going to give you incorrect results if you're not on the first slide. Try something like this on resize. save current slide index move to first slide calculate bounds move back to current slide
  2. OSUblake

    problem with color changes

    I don't know what's supposed to be happening. Make a demo with 1 box that doesn't move, and start from there.
  3. OSUblake

    problem with color changes

    You're using a file from 2012. You can grab the latest files from a CDN like cdnjs. https://cdnjs.com/libraries/gsap
  4. It eliminates the need to wrap mainObject.closeDragMethod in a function. I wrote a little about scoping here. If you're curious, here's a demo that shows how I typically set classes up with draggable. Look at the ColorItem class on about line 65. It doesn't use Angular, but it's the same concept. I make the draggable callbacks part of the class.
  5. It doesn't even look like you have a "close" method. You do have a "closeDragMethod" though. Again, a demo is really the only the way to understand the issue. However, the code you posted gives a little more insight into the problem. It's just a scoping problem. You're not using arrow functions or setting the scope of the draggable, so "this" inside the draggable callbacks refers to the draggable instance. Therefore, this.close() or this.closeDragMethod() will be undefined. So setting "this" to a variable like you did is correct approach. You could still set scope in your callback. onDragEnd: function() { if (this.hitTest(".trashcan", "10%")) { TweenMax.to(this.target, 0.2, { opacity:0, scale:0, onComplete: mainObject.closeDragMode, callbackScope: mainObject }); } ... }
  6. A demo would be helpful because your code doesn't look right. It should probably be something like this. update() { TweenLite.to(this.target, 0.6, { opacity:0, scale:0, svgOrigin:"0 0", onComplete: this.close, callbackScope: this }); }
  7. OSUblake

    Bending object as its animated along bezier path?

    Hi @wcomp You may want to try pop.svg. https://github.com/ste-vg/pop.svg
  8. OSUblake

    Animation: Grow Tree Branch With Leaves

    Related thread.
  9. OSUblake

    Proper way to animate responsively

    Did you notice the other custom element property being used? var t = box._gsTransform; But GSAP put that one on there for me. Since _gsTransform is an object, you can pass around its reference in some pretty interesting ways. I have several ModifiersPlugin demos that use the _gsTransform object as a point to follow. The first leader being passed into the createLine function is the pointer object. All the other leaders are _gsTransform objects.
  10. OSUblake

    Proper way to animate responsively

    Correct. See my two responses here for why I create a variable in a loop, and why it's not a new object.
  11. OSUblake

    Objects, coordinates and paths

    I don't know. Have you tried using a RenderTexture? That might give you a bigger object to pan around. Zooming might not look good because a texture is a bitmap, so it will get pixelated if you scale/zoom in. http://pixijs.download/release/docs/PIXI.RenderTexture.html https://pixijs.io/examples/#/basics/render-texture.js https://pixijs.io/examples/#/demos/render-texture-demo.js
  12. OSUblake

    Proper way to animate responsively

    You can do a FLIP animation.
  13. OSUblake

    about random color of backgroundcolor

    You need to run your backgroundColor function first to generate the array. backgroundColor: (function(){ var m = new Array(); for (var i = 0; i < 80; i++) { m.push("#"+ Math.floor((Math.random() * 10))+ Math.floor((Math.random() * 10))+Math.floor((Math.random() * 10))); // to construct a color arrary. } return m; })(),
  14. OSUblake

    Combo of Spine, Pixi and GSAP

    Spine has it's own animation runtime, so GSAP probably won't be useful in that regards. But you can certainly animate the Spine display object itself using GSAP, like it's position, or trigger a spine animation using callbacks on timeline.
  15. OSUblake

    PixiPlugin error when used with Angular

    That error happens because the file you had listed was an ES module, which has to be imported. The scripts array expects files that don't have to be imported, i.e. the umd version.