Jump to content

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!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. 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.
  2. OSUblake

    Image Clipping

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

    Image Clipping

    Internet Explorer... http://codepen.io/osublake/pen/JYNRVN
  4. 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
  5. 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.
  6. 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
  7. 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
  8. Great work @Sir Hound! I really like how you have an actor class.
  9. 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.
  10. 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
  11. 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
  12. 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
  13. 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
  14. What you created almost looks like a mixture of both our responses, using clamping and setting a tween to certain progress value.
  15. Nice Diaco! That's a good way of doing it if you have a lot of values. The function you are looking for is typically called lerp, which stands for linear interpolation. It's pretty easy to do, and I include it in a list of helper functions for my projects. The amount you can lerp is usually clamped between 0 and 1. function clamp(value, min, max) { return value < min ? min : (value > max ? max : value); } function lerp(start, end, amt) { amt = clamp(amt, 0, 1); return start + (end - start) * amt; }
  16. Like this... var progress = 0.5; var value = Power2.easeInOut.getRatio(progress);
  17. You can always scale the container on resize. If you are going to do 3d using a z-index, there a several different ways to go about it. You could calculate the z value for each point on each face and then on your update callback you would sort the faces based on the their lowest z-value. That's how I did it in this demo... although SVGs don't have a z-index so I just appended the faces in that order. http://codepen.io/osublake/pen/eNKYbG If all you are doing is a cube and using rotationY, then you could just make a list of the z-index values and then change the z-index on the faces every 45 degrees. All that matters is that the z-index of the faces you can see are higher than the ones in the back. http://codepen.io/osublake/pen/2dd7fe6825d3d3a54398906ef9c988e9/
  18. I can't acess Safari right now, but if you manually create the 3d transform it should work. Try this out. Just drag the control points around and it shouldn't intersect with the green box. http://codepen.io/osublake/pen/e8f4cb8391f473891d05cbe60d21cbba/ I've used that matrix to animate 3d objects in the past. It's based off this article, and the code is from this gist. You don't need jQuery UI. I just copied everything from the gist, but it's pretty easy to modify to work with whatever it is you are trying to animate.
  19. OSUblake


    The ScrambleText plugin would be great for this. The only problem is that it randomly chooses the value/char. Maybe Jack could add in an option to use sequential values instead of random ones. I didn't set it up like a timer. I just wanted to show how it looks weird using random numbers. http://codepen.io/osublake/pen/RWoOzO/
  20. Perhaps. Using a timeline with nested timelines might not be necessary if it's just a simple animation for each box. http://codepen.io/osublake/pen/JYbVRJ
  21. The only person I know of that does animations like that, with all the particle effects and verlet physics, is Gerard Ferrandez. I don't know him personally nor do I know if he his for hire, but here's his CodePen and Twitter page.
  22. Instead of the var tween being a normal tween, make it a timeline with the animations you want to play before moving to the next page. You can add the same onComplete callback to the timelineline.
  23. What is the end result supposed to be? Are you trying to add additional pages or have an animation on each page that plays before sliding? Or both? Describe what you are trying to do because right now I'm just guessing.
  24. You can use the onComplete callback to start the page animation. I removed the CSS transitions. http://codepen.io/osublake/pen/ojYERX
  25. Oh, wow. I thought I was in the know, but Reactive programming and RxJS is totally new to me. I'll need to look into this some more. Thanks! Do you have a demo of GSAP working with Cycle.js? I'm not sure I completely understand what an animation side effect would be or how the driver would work. Would you just extend the DOM driver?