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. The whole sine wave thing is kind of interesting. I discovered it by accident, but that's what led me to make that SVG Doodle Morpher. And yes, I agree that most animations won't take advantage of this. It's definitely better suited for animations that are created in response to some user interaction. Just something to think about. Now that I have a better understanding of how this works, I would create my additive animation class based around a timeline to make it easier to manage. I know this doesn't fit into the current API, but for my demo purposes I would set it up where you add animations to the same instance. Maybe something like this. var tween = new AdditiveTween("#element"); // Just add animations to the instance tween.to(1, { x: 100 }) .from(1, { y: 100 }); // Later on... tween.from(1, { x: -100 });
  2. Using a timeline to do CSS animations is not something I have ever tried. I think what you are trying to do would be much easier to do by just using relative units. Your end user wouldn't have to figure out the coords. If each move were 50px you could create that sequence by doing this. tl.set(box, { x: 275, y: 200 }) // Some random position .to(box, 0.5, { y: "-=50" }, "+=0.5") // Up-1 .to(box, 0.5, { x: "-=100" }, "+=0.5") // Left-2 .to(box, 0.5, { x: "+=100" }, "+=0.5") // Right-2 http://codepen.io/osublake/pen/epeVRX?editors=001
  3. Kevin, I really appreciate you taking the time to explain how this works. Your second post really helped my understand how relative animations work. I must say that you are an absolute genius!!! The whole negative delta thing was confusing to me because I wasn't doing relative animations in my previous demos. It wasn't until I started working on recreating your floated content example that it hit me… and it hit me hard. I was floored. It's so simple and obvious now. So here's the demo I recreated. Click anywhere and start dragging the box around to resize the container. Go crazy with the resizing. Click back and forth between the far left and far right side to create an interesting swinging effect. Pretty cool, right? There's a lot of stuff going on, so there must be a lot calculations taking place. Nope! This is what floored me. If additive animations were a part of GSAP, you could create that entire animation by calling one simple tween on each element. TweenLite.from(element, 1, { x: lastX - element.offsetLeft, y: lastY - element.offsetTop }); That's it! You could do same thing with a flexbox layout. I've never seen a flexbox layout animation that didn't involve a bunch of calculations and/or cloning of elements. Now we know it's possible to do using a very simple tween. I was curious how text would work so I dropped in the SplitText Plugin. Now this could make for some really interesting animations. @Jack When it comes to the different overwrite modes, I have never used this feature, so I'm only familiar with "auto". I understand that this would increase complexity and file size. If it makes the file size too big, couldn't this just be a TweenMax only feature or maybe an optional utility class that could hook into the engine? Concerning performance, I think you should look at the overall animation and not just GSAP. While it's true that the engine will have to do more work, other things can be simplified so the overall performance impact might be negligible in some cases. For example, look at the animations used in these waves or the GreenSock cape. They're both really nice, but require some expensive calculations to be performed on each update. You could simplify both of these animations by animating a set of points in a zig-zag pattern. The additive animation process will blend the movement into a nice smooth motion. So instead of doing trig calculations on each update, all you would need to do is apply those points to a catmull-rom spline and it should look pretty close to a sinusoidal wave. I haven't tested this, but I'm pretty confident that several additive animations running at the same time would perform better than doing a bunch of trig caclulations on each update. I know that animating waves is not something you typically see, but it does illustrate how additive animations could possibly improve performance by reducing the overhead somewhere else. Waves: http://codepen.io/waterfallmedia/pen/ZbOjRO/?editors=001 GreenSock Cape: http://codepen.io/GreenSock/pen/WQjRXE/?editors=001 Floated boxes: http://codepen.io/osublake/pen/30f4dc1606d31a0026313181cb10f03b?editors=001 Split text: http://codepen.io/osublake/pen/9b01ac4ad954828b502df87710d75a0c?editors=001 Catmull-Rom Solver: http://codepen.io/osublake/pen/BowJed/?editors=001
  4. I'm not sure what you mean by integrate keyframes instead of specifying dimensions. Isn't this what you want to happen. move to x: 30 delay move to y: 30 delay move to y: 50 http://codepen.io/osublake/pen/meqMae?editors=011
  5. If you have a lot of conditional stuff, you might want to use an array like that queuing example I made. That would allow you to do stuff like filtering out things you don't need, changing the order, or mapping new values. Here's a very basic example where I run the array through a loop, adding tweens based on a simple condition flag. http://codepen.io/osublake/pen/dd7b66afaea0a38c39bc904af7aa06eb?editors=001
  6. What you are doing is a new feature and won't work in all browsers. Do it just like Jack showed right above my post unless you are using Babel, Traceur, or TypeScript, which will convert the code... // From this... TweenLite.to(gfx_obj, 1.2, {["r"+ num]:5, ease: Power3.easeOut}); // Into this... var _a; TweenLite.to(gfx_obj, 1.2, (_a = {}, _a["r"+ num] = 5, _a.ease = Power3.easeOut}, _a));
  7. It seems like you would have seen an error in the console for this. TweenLite.to(sideElement1, 2, {sideElement1, width:"200px", height:"150px"}); // Should be TweenLite.to(sideElement1, 2, {width:"200px", height:"150px"});
  8. Do you realize how simple this is with SVG? You don't need to make a single calculation. All you need is a polyline with 3 points, and you tween the middle point. http://codepen.io/osublake/pen/avLxMx?editors=001
  9. What's so hard about this? tl.to('#element', 1, { opacity: 1 }); if (a == tl.to('#element', 1, { scale: 2 }); tl.to('#element', 1, { opacity: 0 }); Use labels and you won't have to split the method chaining up like that. That would allow you to add all the conditional tweens at the end of your code block.
  10. That's a computed property name, and you should not use it without a compiler because it hasn't been implemented in all browsers. http://greensock.com/forums/topic/12420-tweening-parameter-string-values/?p=51617
  11. You definitely don't need an internal timeline, I was just showing one way you could encapsulate everything inside a class. The only thing that matters is the getter/setter, which is just a function that does the same thing as Diaco's and the other clamping functions I showed.
  12. Yeah, I'm not sure how that would perform in different browsers because on the planet I live on we do not have animated layouts like that. You should try and see what kind of stuff you can you can do with relative floating demo. Maybe add in some text and use the splitText plugin to see how it behaves when you drag the box around. I didn't see a examples folder on GitHub, but you could just copy the JavaScript used in the demo to create your own version. He said it will only work in Chrome. I also saw a JSFiddle version of it a couple of days ago, but I didn't save the link. If I come across it again I will fork it. http://kevindoughty.github.io/Hypermatic/relativeFloat.html
  13. I'm not big into social media, so I'm used to most of my work going unnoticed. This time was different. I wanted people to see this, and it paid off. Early in the morning I saw a notification that said Kevin Doughty liked your pen. I had to do a double take to make sure it was the real Kevin Doughty. Score!!! I hit the mother lode. Just look at this. This is what you call a responsive layout!!! To bad I have to leave right now. I'm going to have to come back to all this craziness later tonight.
  14. I wish I could find enough time to create some type of e-course or book on creating dynamic animations with GSAP using OOP. This is essentially the same demo I posted earlier in this thread, which was the same thing I posted earlier in PM that somebody sent me. If this were hockey, some might call it a hat trick. If you keep reusing the same component in your designer, this would work great. http://codepen.io/osublake/pen/a02888619a4879c4e44ec53d58afb105?editors=001
  15. 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
  16. 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);
  17. 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
  18. 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
  19. 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.
  20. 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.
  21. 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.
  22. 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.
  23. 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.
  24. 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.
  25. 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).