OSUblake last won the day on January 20

OSUblake had the most liked content!

OSUblake

Moderators
  • Content Count

    3,994
  • Joined

  • Last visited

  • Days Won

    412

OSUblake last won the day on January 20

OSUblake had the most liked content!

Community Reputation

9,180 Superhero

About OSUblake

  • Rank
    Moderator

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

17,114 profile views
  1. 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.
  2. 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
  3. 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.
  4. 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 }); } ... }
  5. 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 }); }
  6. 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
  7. OSUblake

    Animation: Grow Tree Branch With Leaves

    Related thread.
  8. 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.
  9. 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.
  10. 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
  11. OSUblake

    Proper way to animate responsively

    You can do a FLIP animation.
  12. 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; })(),
  13. 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.
  14. 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.
  15. OSUblake

    ADA Compliancy and Greensock?

    What makes a website ADA compliant? As long as it follows guidelines for accessibility, I don't see why animations would be a problem. But I guess it depends on the type of animations. Seizure inducing flashing lights would probably be a bad idea. Animating a menu into view would probably be okay. But I'm no expert on this. If you're worried, you can have an option to turn any animations off.