Jump to content
GreenSock

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

OSUblake last won the day on November 30

OSUblake had the most liked content!

OSUblake

Administrators
  • Posts

    7,526
  • Joined

  • Last visited

  • Days Won

    641

Everything posted by OSUblake

  1. If you can get flexbox to work with jQuery UI, you can get it to work with GSAP. Here's something I was playing around with awhile ago. The block gets positioned relative to the container after you throw it and it bounces around. But it gets even crazier because you can throw the resize handle for the container around. Try to get both of them bouncing at the same time. How's that for responsive? http://codepen.io/osublake/full/oXKmNO/
  2. Have you tried GreenSock's Draggable? Here's a simple drag and drop I made in about half an hour. Try modifying jQuery UI to do that in under an hour. http://codepen.io/osublake/pen/waVYvz/
  3. You can repeat the first command instead of closing the path with "z". You might have to make a slight adjustment to the time depending on how long that segment is. d="M51,110c0,0,22.151,0.773,42.69-5.089 c11.289-3.222,20.718-10.434,27.659-19.791... Replace the "z" at the very end with that. http://codepen.io/osublake/pen/zGgWNG
  4. Have you tried to use WebGL to speed it up? I saw that as an option. To keep the same tab open and a better workflow, use Browsersync for live reloading. It will take you 5 minutes to gets started if you've never used Node before. Mac users might need to look up the term "sudo" before installing stuff with Node. So instead of testing the movie everytime, you would just publish it and have browsersync listen for changes to any html, css, or js files in your project's folder.
  5. You make a clone of what you are dragging and set the clones position relative to something that won't change, like the top-left corner. http://codepen.io/osublake/pen/XJQKVX
  6. I added duration/totalDuration and time/totalTime just to see the numbers. You were just tweening time, which stops at 4 secs, so that why it couldn't go past one cycle. Changing it to totalTime allows it to go past the 4 second mark. http://codepen.io/osublake/pen/bdXpMa?editors=101
  7. An anchor <a> tag is an inline and doesn't have a position. You can either display an anchor as a block, or wrap them in a div to give them a position. Do that and you'll be fine. Look again. I wrapped the first 3 links in a div and slowed it down so you can see. http://codepen.io/osublake/pen/jPgEVr
  8. Wrap your links in a div or some other block-level element. I just did the bottom 2, "Arsip" and "Mobile Version". http://codepen.io/osublake/pen/jPgEVr
  9. I don't know if I'm see what you're seeing, but you're hit testing the shadow which makes it fire before it's over the element. It's not unusual to have a pointer device outpace something when you moving it around really fast. Try dragging anything on your computer really fast. It's usually lagging behind. I'm not seeing anything on my touch screens. I didn't see in your code if you were using the draggables x/y properties for anything, but I've had problems in the past with that being a little out of sync. I usually use the transform object on an element as a more reliable way to get it's position. So I tend to use this - element._gsTransform.x over of draggable.x Another thing that might be the cause of your problem is Cordova. I've used it in the past and it performed really poorly. I don't know if things have changed since I last used it, but I remember apps getting rejected by Apple for being too slow.
  10. I'm still going to put this online. I've just been stupid busy these past couple of weeks. However, I should have time next week to wrap it up and put it online. I did manage to get enough time to help one our newest members out, @bQvle, and it paid off. He made a class for PIXI.js that will tile images along a path instead of stretching them. I dropped his file into my project and all of sudden my paths became a smooth looking rope. I already had the points calculated, so it worked out nicely. For anybody else that is curious about how to make a texture bend using PIXI, you're going to have to figure out where points on the curve are or were you want them to be. You can interpolate the path using time, but that will make all the points evenly spaced which can become an expensive operation. I flattened the curve to set tolerance, which is more accurate in figuring out things like where it's going to bend and where it is relatively straight. I uploaded an example of how the flattening works. http://codepen.io/osublake/pen/doBQMR/
  11. Cool. What was the problem?
  12. It still shows up in mine http://codepen.io/osublake/pen/7501ff2719487fb8f55df188123c2f7b
  13. It's cool. But I don't know if this is something that Jack will change. FWIW, I'm kind of messing around with timing issues right now. As a matter of fact, I stumbled upon one of your issues on GitHub for Pixi Particles. I've been having a hard time getting the first couple hundred of ms in sync with GSAP, so I think I'm just going to make my own particle container and use a timeline as the movie.
  14. So apparently this is how the fps are calculated in RAF: 1000 / (16+N) = fps, where N is the elapsed time, and fps is clamped at 60. You could use that to figure out when to call your loop and keep everything synced.
  15. I used start like that because of how you were displaying the total time. But forget that I was even messing with a timeline. You would calculate the actual time elapsed and call setTimeout based on the time difference from the last frame, just like RAF. I tell you this because it works. I once did something along the lines of... var delta, time, current; var last = now(); var fps = 1/60; function someLoop() { current = now(); time = tl.totalTime(); delta = (current - last) / 1000; last = current; // Update while(delta > fps) { delta -= fps; time += fps; tl.totalTime(time); } // Render }
  16. That was just a quickie way to show you how it works because that is what the example was using. You can set it up to call your render method and you can use TimelineMax.exportRoot() to do the updates on.
  17. You can use performance.now() to measure time. It's the same high resolution timer used by RAF, and is also a good way to measure how long it takes to execute a callback. Date.now() is not accurate and will shift over time, like every 15 minutes or so. And you're not going to get 120fps since RAF is capped by the browser. You could rework this to be more accurate, but it was just to give you an idea. http://codepen.io/osublake/pen/oXroyE?editors=001
  18. Interesting trick Jonathan! Never seen that before. Whenever I need to change the z-order of SVG elements, I just append them. It's basically doing the same thing as the z-index in CSS. http://codepen.io/osublake/pen/YXoEQe
  19. Correct. A timeline adds TweenLite instances, which don't have the updateTo method. However, you can add a TweenMax instance by using .add(). And it doesn't have to be in a .to() tween, that's just what I used. I made another version of that demo using a timeline. Notice how I'm not even keeping track of the tweens. I used the .getTweensOf() method to get the tween I want. Once again, setting priority to -1 doesn't matter. Your tweens are going to be updated before it calls your callback, which would be your renderer. Look at the console which shows the tick count. The tween is updated first. http://codepen.io/osublake/pen/5f6c34d42995223f0025eda5b3637ae6?editors=001
  20. So for the tick, I would have it do two calls - one to update any values, and then one to call the renderer. That will make sure it happens last. About the updateTo, it depends how you want your tweens to look and where you want them to start from. I made a little demo that shows the updateTo being applied while the stars are tweening. The update button will change one of the star's x value to 275. Notice how once you update a star, it will only go between the point at which you updated it, and 275. http://codepen.io/osublake/pen/03e54aae77aacc6e9fd889392674dea6
  21. No, you only update what you want. You can even update the values while it's tweening. I just said it doesn't matter for the tick. The priority is for the callbacks you add.
  22. Whoops... I forgot the link. http://codepen.io/osublake/pen/vOwWYR
  23. I take it you're using PIXI from your other thread, which means you can use the updateTo method as long as it is not a plugin value. http://greensock.com/docs/#/HTML5/GSAP/TweenMax/updateTo/ As for the ticker, I don't think that matters since it is called after the engine updates.
  24. Just to add to what Rodrigo said. If you are trying to install it through Grunt there is a Bower plugin you can use. https://www.npmjs.com/package/grunt-bower
  25. Well, the reason for the blur is because the images are being scaled. You would need to load the images at that size to prevent the blur. Another way would be to load two images, one for a thumbnail and the other for the full size. As for the centering, I don't see anything wrong. However, I can't check on Safari right now.
×