Jump to content

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

OSUblake last won the day on December 3

OSUblake had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. Yeah, nothing is built into GSAP to handle this. I just used a function to show how it could be done, but there are other ways to do this. How well do you know you JavaScript? I see questions very similar to yours all the time, and my response is almost always the same, use getters/setters, which will allow you to change the variable. If you are working with DOM elements, you should create some sort of proxy object or wrapper for the element so that GSAP will not modify the property directly. It would be nice if GSAP offered some sort of abstract actor class to use, but for now you will have to create it manually. Here's just a quick demo of how you could set something like this up. Each class has an internal timeline and a getter/setter for the x value so you can change the clamped values on the fly. http://codepen.io/osublake/pen/b50fe2a9e1b3d684edb78cbf8c0e8d19?editors=001
  2. Very simple decay... http://codepen.io/osublake/pen/RNZmEO A better way to calculate it... var amplitude = 90; var decay = 0.5; var freq = 1; y -= amplitude * Math.cos(freq * time * 2 * Math.PI) / Math.exp(decay * time);
  3. As some of you may know I'm a huge fan of using PIXI.js for canvas projects because it by far the best 2d renderer available. Anyways, today I was updating a PIXI project with some tools from a company called CloudKid which has started to convert all their Flash stuff over to PIXI. I just found out that they have created a tool to bridge the CreateJS exported by Flash over to PIXI, which will run much faster and includes a bunch of WebGL filters and masks. Here's two examples of a Flash animtion export to PIXI. http://cloudkidstudio.github.io/PixiFlash/examples/shapes/ http://cloudkidstudio.github.io/PixiFlash/examples/animation/ Repo: https://github.com/CloudKidStudio/PixiFlash
  4. Just wondering what's the invisible button for in a banner? If you are looking for an invisible click, wrap a label element around a hidden checkbox. Here's a pretty cool post about it... http://codepen.io/bali_balo/post/hacking-checkboxes
  5. Thanks! I was just thinking that if I saw this demo a week ago, there is no way I would be able to believe that those animations are just simple linear tweens. It looks like some complicated path following algorithm is being used. I don't think I'll have time to try this out, but I'm thinking that Carl's challenge to recreate the new Google logo animations would be a lot easier to pull off using this.
  6. Thanks! It's kind of funny how I had a hard time understanding what you were talking about when you started this topic. It seemed like one of the overwrite property values that Jonathan posted would take care of your problem, but then I saw a YouTube video on this and it hit me like a ton of bricks. It makes perfect sense now as this is how motion works in the real world. You don't switch from one direction to the next in a flash. There is going to be some overlap between two opposing forces. And this overlap also has a nice side effect because it creates a natural ease between the two. This is definitely on the top of my list of GSAP features I'd like to see in the future. I don't see any reason why it would be hard to incorporate into GSAP. If you look at my previous demo, there's really not a lot of code that is used in the actual calculation of the animation. And I'm sure there's a better a way of calculating the values than how Apple did it. Trying to understand how to work with negative reversed values was insanely confusing. It was like all of sudden I developed the worst case of dyslexia. Try to spread to the word some more. You really helped me out. I know to the untrained eye the differences might be subtle, so hopefully my new demo will make it more apparent.
  7. Well I thought my demo was going to be picked up by Twitter or CodePen, but apparently nobody really cares for a demo where you can move a box around. Or maybe it's just not apparent that something awesome is actually taking place. I still stand by my statement about this being a game changer. There is no real JavaScript based solution for doing this kind of stuff. Do a Google search for additive animation or animation blending, and the only thing it will bring up is stuff for Unity, Unreal, or something from AutoDesk. I just made a demo that makes it very apparent that something very different is going on here. The only thing it does is create an x and y tween every 100ms for each little ghost orb. The x and y value is just the x and y coordinates of the mouse. That's it. There are are no Bezier curves, rotations, angles, transform origins, crazy matrix calculations... nothing. Having said that, you are probably imagining a bunch of jagged or rough animations. Check it out. Play with my little ghostly friends. Each ghost is made up of 500 different particles, and it's just blending each one of them oh so perfectly. Move your mouse around to get them to follow you. They give up when your mouse leaves the screen.
  8. Ah ha. Fixed the easing the problem. You have to use an ease with a type of "easeInOut". Now its like a point-n-click bezier maker.
  9. Jack, I would have to agree with Michael that this would be an awesome feature. Now that I've had a chance to play with it, I definitely think this could be another GSAP game-changer come v.1.19.0. It really wasn't that hard to create. I just did modeled it after that slide. However, it was really confusing to understand at first because the values are relative. So if you want to move an object from x: 0 to x: 500, you would set it's starting position at x:-500 because the end position is 0. Yeah, confusing. Not really sure how a relative value would work for something like color. I'm also not sure how to handle to easing. Applying easing to each individual tween won't work because it causes massive jumps. So now I have to figure out what is the starting value of the tween. Do I use the first tween's value, the last tween's value, is the value still relative... I don't know! I tried a lot of variations, but it still caused jumps or the easing didn't change affect the values. I'll try to figure that one out later. The code is not super complicated. The only unusual thing is that I used a linked list as a data structure for the tweens, but you could use an array or a plain object. I just like using the linked list because it's faster and easier to manage than an array as it doesn't actually store anything.
  10. Cool! That's the video. The part about additive animations starts at around 25min. I must say that I was completely off the mark about how this work. It's actually more complicated than I was expecting and has nothing to do with Beziers or easing. From what I gather, an additve animation is a fromTo tween using relative values. When a new animation is added the old animation does not get overwritten. Instead, both animations continue to run in parallel with each other, and the difference between the two animations is calculated and that value is used. So to get this to work like Apple does it, you would need to tween generic objects and then have an update method calculate the difference and apply it to your target. I'll have to look into this some more, but here's a slide that kind of shows what is going on. So the presentation row is the value that you would set on your target, which you can see is the difference between the 2 animations relative to the model's value.
  11. Glad I could help out. If you can, thank the author of that book by buying it. It's by far the best animation book I've come across. It may be written for the canvas, but in the end it's all just JavaScript. With the help of GSAP, I've been able to recreate every single one of the canvas experiments listed on the book's homepage using regular DOM or SVG elements (of course this does not include some of the pixel rendering and video techniques in Chapter 4).
  12. I messed around with some of the triangulation methods, but wasn't able to get good results. I now see on the svg-mesh-3d GitHub page that it says it is best suited for silhouettes, like font icons. I tried it out on my rope texture, and the results weren't smooth (top picture). The bottom picture I used the MorphSVG plugin. I know you can change the tolerance, but that means more polygons. If you turn it up too much you might end up with the great state of Minnesota, which I don't think would be very performant for an animation.
  13. I think for the ease to look correct it would also have to be calculated during the update using something like this... http://greensock.com/forums/topic/12533-directly-accessing-using-ease-functions/?p=52184 But then again, I'm still not sure how those points are calculated and if the values would should be treated as an ease or a normal path interpolation. One very important lesson I learned while making this custom ease editor is that Bezier easing is not calculated the same way as Bezier path. I'm curious as to how Apple solves this problem, but I can't find the video from the WWDC that explains how this works.
  14. OSUblake

    Image Clipping

    Nope. I updated the pen to work in IE.
  15. OSUblake

    Image Clipping

    Internet Explorer... http://codepen.io/osublake/pen/JYNRVN
  16. Great point about throttling! It's very easy to overlook how many times an event will fire. Another technique that is similar to throttle is debounce. While debounce is probably not ideal for a scrolling animation, it works great for other events that can be postponed, like window resizing. This article has a pretty good elevator analogy about the difference between throttle and debounce and a mouseover visualizer. http://drupalmotion.com/article/debounce-and-throttle-visual-explanation Here's a quick demo I made using lodash's throttle and debounce methods. Notice how throttle counter still gets updated at a restricted pace, but the debounce counter won't update until after you stop resizing the window. http://codepen.io/osublake/pen/OymRmv?editors=001
  17. A more advanced version that solves the Bezier on update. In both my examples I'm resetting the tween time so it doesn't jump all over the screen, but I don't think you would normally do that for an additive animation. http://codepen.io/osublake/pen/YyVWaX/ I'm still a little confused by this image. How are the 2 anchor points for the curve chosen. Is it the x-intercepts of the start of the new animation and the end of the old animation, or is there some formula used to calculate where the curve starts and end? If I knew that I could make it smoother.
  18. I've been looking into Delaunay triangulation for the past couple of hours, and from what I can tell, it seems to be better suited for paths that are closed and can be easily approximated by a polygon or some other type of mesh. I haven't tested this, but it seems like a really complicated SVG with a lot of variation, as in different colors, strokes, paths, gradients, filters, etc. might not work work that well. Again, I could be wrong as I haven't tested a complex SVG using this method, but right now it doesn't seem like a panacea to handle all different types of shape morphing. I did create a demo some time ago that I think would work great with the methods you presented. I'll try to find some time to add them in later, but as you can see the shape morphing is not that great... although that's really not the point of the demo. It's to reduce the number of points in a polyline. http://codepen.io/osublake/pen/a1a42a3ee8550d6b7a0fb29c6a5b1946
  19. You can do this using updateTo. You just need to create a wrapper object around your element. Create a Bezier like Diaco showed to make it even smoother. http://codepen.io/osublake/pen/PPmPWz?editors=001
  20. Great work @Sir Hound! I really like how you have an actor class.
  21. Hi @Fmuaddib, Thanks for those links! I was looking into calculating shape contours of SVGs and have been looking for something a little more robust than Poly-K.
  22. Here's a good blog post about z-sorting. It uses canvas, but you can still apply the same technique to regular DOM elements. http://codepen.io/towc/post/hacky-3d-without-webgl-or-libraries
  23. This is more of what you are looking for, but this could end up getting really complicated. http://codepen.io/osublake/pen/bd0659b8a5fb7ca73763d5f3b450a079?editors=001
  24. Here's a simple clamping function. You can modify it to check the target and if you are using relative values. http://codepen.io/osublake/pen/208cc6215ea57ce5c954b45b61852ddc?editors=001
  25. Hi Sahil, Explaining how to do z-sorting in a forum post is kind of hard. I started out learning 3d from this book. The code is written for the canvas, but you can apply the same techniques to regular DOM elements. For that SVG demo, I modified some of the classes from this example, which basically requires you to convert every shape into a triangle using a Point3D class. http://lamberta.github.io/html5-animation/examples/ch16/07-cube.html Here's the source code for that example https://github.com/lamberta/html5-animation/blob/master/examples/ch16/07-cube.html https://github.com/lamberta/html5-animation/blob/master/examples/ch16/classes/point3d.js https://github.com/lamberta/html5-animation/blob/master/examples/ch16/classes/triangle.js https://github.com/lamberta/html5-animation/blob/master/examples/include/utils.js