Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

OSUblake last won the day on June 23

OSUblake had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. Nice! Did you use the custom ease plugin that @frux posted the other day, or just modify the Back ease?
  2. OSUblake

    Graphing with GSAP

    I fixed my demo to work with Firefox, and it doesn't seem that bad. I wonder if that is because I'm using the image tag, and maybe Firefox is caching it? With IE, you can't convert an SVG to an image using the canvas. However, the SVG will still show up on the canvas, so you could just use the canvas element instead. The only problem with that is the canvas won't be part of the SVG document, so it might not scale the same as your SVG. If that might be a problem, you could use something like Fabric or canvg to convert it. For the zooming it sounds like you got that figured out. That's
  3. OSUblake

    Multiple TweenMax

    All those try/catches are unnecessary, and really confusing. Just follow what I did. You can keep adding as many versions as you want. http://codepen.io/osublake/pen/a1325263d93f0085a4e9df87e215e58f?editors=101
  4. OSUblake

    Graphing with GSAP

    Improving SVG animations with that many nodes might be pretty hard, especially on graph where there is probably a lot of overlap between the elements. But this got me thinking about how you can improve the performance of the canvas by using bitmap caching. I don't think I've ever come across an example of bitmap caching being used to improve SVG performance, so I took a little stab at it. It's based on this Fabric demo, which uses some pretty complicated shapes. The initial tiger heads that are spinning are SVGs, and as you can see, performance is terrible. When you press the Use Cache but
  5. From tweens are rendered differently, so the two calls are normal. However, setting immediateRender to false in your tween should stop the sets from being called before it renders for the first time. TweenMax.from(foo, 1, { myPlugin: 2, immediateRender: false });
  6. OSUblake

    Multiple TweenMax

    Did you copy and paste that code in here? The reason I ask is because Globals is misspelled - Gobals I'm not sure if I understand the order here. Is "my_gs" the other developer's version or yours? And who is using the global version? Will this work... http://codepen.io/osublake/pen/cd90d7ad0116f0dbe4325db9110e42fd?editors=101
  7. You had to keep tapping because on mobile devices clicks take 300ms to register, and mine were set for 200ms. That's why it's best to let GSAP handle all this. I took Diaco's advice and added a trigger, which controls another Draggable created on the menu. It basically syncs the movements of the container and menu together. And all the events are now back inside the Draggable, with most of the logic residing in the liveSnap function. http://codepen.io/osublake/pen/fa9327ed305f96817ffbe0a50ed64282?editors=001
  8. That's actually from Jamie Jefferson. You could probably simplify a lot of it by using hitTest and getDirection, which is pretty much how this sortable demo works. It might also help to store information about your Draggables in some sort of data structure like an array or object so you can quickly access information about them.
  9. Not sure what you mean. Do you have an example?
  10. Good point! I had no idea that pen Diaco posted even existed. Whenever I want to include one of those plugins, I always have to search through a bunch of different pens to find the right file.
  11. I did that because that is how the square space worked. One issue with clicking anywhere to open the menu is that after selecting some text and releasing the mouse, it's going to fire a click event, so you would need to do something like removing the event listener or canceling the event. Draggable does a great job of handling different types of input, so it would probably be better to let it handle the events if possible. Plus it would reduce a lot of that code. I just separated them out to to test different ways of initiating the drag. The most important thing is to not start dragging at
  12. You can use getters/setters to transform the values. It basically does what Rodrigo suggested, but doesn't require an onUpdate call. So you could tween your x and y values from 0 to 1, which would be the percentage, and then in your setter you would change the actual x and y values to the correct distance. If you're not familiar with using getters/setters, here's two examples where the x value is being rounded. Property based: http://codepen.io/osublake/pen/pvKLVG Function based: http://codepen.io/anon/pen/ZYRMPe?editors=101
  13. I combined my first two examples into something that I think will work. There's a lot more code, but most of that it is used to determine if a touch is a click since it's not using Draggable's onClick. It could probably be worked back into Draggable, but I'll just leave it for now. http://codepen.io/osublake/pen/351ac631e161d20014a2f0b7ee992345?editors=001
  14. You can check if any text is selected using window.getSelection(), which you can then use as flag to determine if you should start dragging or not. It's still a little sloppy, and I think the click function might be making the menu disappear after selecting text. Maybe you could change it so that clicking anywhere only works if the menu is open. I'm sure with a little bit of rework it could be pretty functional. http://codepen.io/osublake/pen/36b4c0c86e793a54f4ff706e5f80c85b?editors=001
  15. The first version has to choose dragging or selecting, so there isn't a lot of tolerance. Here's the hacked version working with IE. I just moved it to the onPress callback. http://codepen.io/osublake/pen/36b4c0c86e793a54f4ff706e5f80c85b?editors=001 Dragging left and right will also select text which doesn't look right. I think the best way to do this is to base the action on the type of event, pointer or mouse. If you look at Windows, the touch and mouse motions aren't the same. For mouse input it usually involves moving to certain spot and hovering to trigger it, while touch requires
  16. From what I can tell, GSAP uses dependency injection or something like that so the order doesn't matter.
  17. I know this is kind of an unusual thing to do, but I wanted to check anyways. His demo does look weird when you realize that you can't select the text. But on the other hand, you probably wouldn't do something like this unless touch was enabled, and touch requires a long press to select text. I know using Hammer.js would probably make this much easier, but here's how I did it by using disable/enable. It's still a little rough around the edges, and I didn't take into account other events like click or the initial text selection, but still a good starting point. It is definitely more res
  18. Is there a way to select text on a Draggable? Removing the user-select style doesn't work. I can add the following to an element, but that seems super hacky. Is there an easier way? Draggable.create(myElement, { allowEventDefault: true }); myElement.onselectstart = function() { TweenLite.set(myElement, { userSelect: "text" }); };
  19. Nice! There's also a clickableTest function where you can test if the element should be clickable, and then return true or false. But what you did is probably the best way since there are so many different types of elements on your page.
  20. With IE, a fixed element is literally fixed. It won't move if you move it's container. You could move both of them at the same time, or you could position it absolutely. I just moved them at the same time. I also moved the nav outside the container so the links would stay fixed. Is that what you were trying to do with the fixed element? What other IE problems did you have? http://codepen.io/osublake/pen/3c27a53500254a7c39729b62a0021460
  21. Don't use the body for the Draggable becase it doesn't have a parent element. You should see an error in the console about this. I think most of your issues are CSS related, especially the fixed element. I built an off canvas menu years ago, and I remember I couldn't use translate on a fixed element because of IE. I had to use left and margin-left instead. What problems do have with the hash anchors? You might have problems in IE because CodePen is running in a frame. If you don't want the menu to close when you click on one, just add this to your onClick callback. if (event.target
  22. It would be helpful if you could provide a CodePen to show the problem. It sounds like you can solve this by using transclusion on your template/directive. Have you tried that?
  23. I wonder how I missed this, because I never really knew what .recent() was used for. One little thing, the list of methods in the docs for TimelineMax has recent in the wrong order alphabetically. http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/
  24. I changed the pause rotating issue with a label check, but maybe somebody has else a better way to do this. When I work with objects that might not have any concept of each other, I like to use events to control them. Here's a demo I made that uses custom events. I found it too hard to directly control the growth of each leaf, so I just send out an event and let the leaves figure out if it is time to grow. http://codepen.io/osublake/pen/gpGEye
  25. This happened to me not too long ago. The problem was a DNS issue, which flushing fixed. You might want to check that out.