Jump to content
GreenSock

OSUblake last won the day on September 16

OSUblake had the most liked content!

OSUblake

Moderators

  • Posts

    9,196

  • Joined

  • Last visited

  • Days Won

    708

 Content Type 

Everything posted by OSUblake

  1. OSUblake

    easing Back

    OSUblake replied to Sami Barasi's topic in GSAP

    I don't know what your script does, but try switching the order. http://codepen.io/osublake/pen/gpWvYm
  2. OSUblake
    The only other thing I can think of is to tween an object and update the css in the onUpdate callback or by using a getter/setter. http://codepen.io/osublake/pen/doWGQP
  3. OSUblake
    I don't know if its even recognizing "rem" as a unit. I think Jack will probably have to answer that, as I really couldn't find an answer by just skimming through the source code. I don't know of an easy fix for you at the moment. You might just have to convert the units manually. For what its worth, I ran into a similar problem before, and raised an issue on GitHub.
  4. OSUblake
    This happens with special units because the computed style is in px. If you set the start values before tweening, it should work. http://codepen.io/osublake/pen/GJmoJR
  5. OSUblake
    Check this thread out. http://codepen.io/GreenSock/pen/KpzeBy
  6. OSUblake
    I had no idea you needed to prefix flexbox properties with GSAP. I tried animating some flexbox stuff in the past, and couldn't get it to work, so I ended up using CSS transitions instead
  7. OSUblake

    How to reuse tweens?

    OSUblake replied to hgl's topic in GSAP

    What you did is fine. The simplest solution is usually the best. Does creating a new tween every time use up some memory? Sure. Are you going notice this? Probably not unless you are creating hundreds of tweens/second to do something crazy like a particle effect. With the way your code is setup now, you have basically given each tween/timeline its own responsibility, which means you can reuse them. http://codepen.io/osublake/pen/dovKWv
  8. OSUblake

    Draggable pause

    OSUblake replied to killroy's topic in GSAP

    I don't have decades of experience, nor am I trying to say you're wrong, but if buttons had a .disable() method, I would expect it to trigger something for matching on/off events. And I say that because this really isn't out of the ordinary with, at least with the libraries I've worked with. Take jQuery UI for example. It is probably the most used drag and drop library out there, and even it calls a drag end event when you disable it. But with jQuery UI, it won't disable it until you physically stop dragging it. http://codepen.io/osublake/pen/256b88333c5634e9f041d8efd4d3b451
  9. OSUblake

    How to reuse tweens?

    OSUblake replied to hgl's topic in GSAP

    You could use 1 tween for everything by changing its reversed and repeat properties. I'm not sure how you wanted the yoyo to work, like does it always add or remove the class, and does it always go to the top? Here's how I did it. Notice that I positioned some stuff absolutely so I didn't have to deal with the changing of block elements. http://codepen.io/osublake/pen/waJrQN
  10. OSUblake
    The reason your code works on CodePen is because the JavaScript is placed right before the closing </body> tag, so the #tester element has already been created by the time your code executes. When you place your JavaScript in the <head> like that, the element doesn't exist yet, so your code isn't able to find #tester. If you're going to keep your JavaScript in the <head>, you're going to have to use one of the solutions Diaco shared. Location matters... http://codepen.io/osublake/pen/xGqgqY?editors=100
  11. OSUblake
    I'm not familiar with Easel, but it looks like bezier properties don't exist on the line object like alpha does on the circle. It's showing a command for the line in the console, whatever that means. Maybe somebody else who is familiar with Easel can help you out. I just updated the line in the callback to animate it. http://codepen.io/osublake/pen/MwpKjX?editors=001
  12. OSUblake
    Put it in a object like var animateLineTest = { value: 100 };
  13. OSUblake
    I just discovered something very interesting about the EndArrayPlugin. If the values at a certain index are the same in both arrays, it won't tween the value, which means the array can contain strings. The only caveat is that the first element must be a number, but that's not too hard to get around. What all this means is that you can split a path string into an array and tween that. Since the plugin is going to ignore strings, you don't need to break your path up into different commands, tween those values, and then rebuild the path string. The only limitations of using this technique are that the number of points and commands must match up, so you can't go from C to c or C to S. You also can't change a flag, like in the arc command where you can specify to use a large arc since that value must be an integer. http://codepen.io/osublake/pen/RPKdQz
  14. OSUblake

    Warp

    OSUblake replied to Lynx's topic in GSAP

    Here's how to do it. But as you can see from the code, it's not going to be an easy thing to implement. http://codepen.io/cx20/pen/bpgBH
  15. OSUblake
    Lol. Fair enough. I didn't know if you had another trick up your sleeve to figure that one out too. And yours probably does look better visually. I saw that monster eye before you changed it, which I thought was pretty awesome.
  16. OSUblake
    i just noticed something with yours. Shouldn't the height get smaller as the width decreases since it's supposed to be the intersection of two circles?
  17. OSUblake
    Nice slider. I don't even think you can initialize one in jQuery UI with the amount of code your example uses
  18. OSUblake
    I think the site was down when he posted that message. Hate to say it, but your Google search is correct. There is absolutely no information available about doing JavaScript based animation in Angular, which I don't get, because Angular is perfect for JS animations. Not only that, but I know that some members of the Angular team are huge fans of GSAP and have done some pretty cool things with it. Here's to hoping that one of these days the rest of the Angular community will figure out that creating CSS classes with names like .view-animation.ng-enter.ng-enter-active is a stupid way to do animations. I did, and that's reason I started using GSAP.
  19. OSUblake

    Draggable pause

    OSUblake replied to killroy's topic in GSAP

    I'm having a hard time understanding what the problem is without seeing an example. And when you disable a draggable, why wouldn't it fire the dragend event if it's no longer in a dragging state? That could mess up other parts of your code that think the draggable is still active. If you want a mouseup event to happen, then add that to the element instead of the draggable. Just set allowEventDefault to true on your draggable. As far as pausing goes, there's a lot of different ways to keep the draggable locked in place without calling .disable() or .dragEnd(). Here's how to do it in one line of code. this.applyBounds(this.target.getBoundingClientRect()); If you need more control over the position, use liveSnap. Returning this.x and this.y will lock it in place since that's the current position. function snapX(endValue) { return someFlag ? this.x : endValue; } function snapY(endValue) { return someFlag ? this.y : endValue; } And here's an example that does something similar to what you described. http://codepen.io/osublake/pen/bNJPwM
  20. OSUblake
    Hi Elliiot, You should check out this thread about loading external SVG files. AJAX is definitely the way to go, and jQuery can really help simplify this process using the load method. This method automatically appends the data for you, and it will also let you select fragments so you don't have to inject the whole file. Here's a demo for you to play around with. Each SVG element is loaded and appended in a slightly different way. http://plnkr.co/edit/nQL8NNSsNaH3Secf1Bnx?p=preview
  21. OSUblake
    Very nice! I just modified a helper function I made that converts polar coordinates to cartesian, and didn't even bother trying to update the points directly. Yours is definitely much simpler
  22. OSUblake
    You can animate a path with GSAP, but you're going to have to manually calculate and set the path attribute in a update callback. http://codepen.io/osublake/pen/rVjYoK/
  23. OSUblake
    Your options for hit testing a path are going to be very limited at the moment. The SVG 1.1 .getIntersectionList() method will do this, but the problem is that Firefox hasn't implemented it yet, so it's kind of useless. Check out this working example... http://xn--dahlstrm-t4a.net/svg/interactivity/intersection/sandbox_hover.svg You may not know this, but you can pass in a point instead of an element to Draggable's hitTest method. Doing this will allow you to more accurately test hits against different shapes. // Exactly at 100,200 this.hitTest({ pageX: 100, pageY: 200 }); // Inside 100,200 relative to its top/left this.hitTest({ left: 100, top: 200 }); Here's an example of how to do this. There's only 1 point at the moment, but hopefully you can see how you could calculate a rough outline of a path. http://codepen.io/osublake/pen/JoQbya/ If that doesn't work for you, then you're going to have to figure out how to do something like ray casting or projections. I've used the seperation axis theorem (SAT) in the past, which works well, but only on concave shapes. It won't work on convex shapes like Pacman. I haven't tried it on SVG elements, only canvas objects, but I'm going to try and convert some of it over and post a demo later on.
  24. OSUblake
    Are you just trying to detect a collision with a circle, or something more complicated? For circles you can just compare the radius between two objects and the distance between them. http://codepen.io/osublake/pen/YXpdYN/
  25. OSUblake
    You need to find the scroll offset. http://codepen.io/osublake/pen/oXYLor
×
Login Create Account