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 learned that starting out in reverse trick from @Diaco, which is really nice because you don't have to pause the animation. Now all you have to do is reverse every animation except for the one you selected.
  2. We've all taken the long road, but you'll get there in time. When I'm working with something that has behaviors and properties that don't exist on an element, I like to create some type of object to group everything together. I try to think of things as being more of a component than an element. The element is just what you see, but there's more to it. So on your coin object you could add more properties to it, like the value of the coin. You could also add more methods to it, like one that moves it to new position. Here's an example of how that might look. // Reduced example var coin = { box: clone, moveTo: function(x, y) { TweenLite.to(this.box, 1, { x: x, y: y }); } }; // Move your coin coin.moveTo(100, 200);
  3. It might be better to reuse the tweens so that the duration stays the same. http://codepen.io/osublake/pen/vObmBR
  4. You're off to a good start for being new to JavaScript and GSAP. Everything is getting messed up because you are creating new elements every time you build your timeline. You don't need to create an element just to get it's instance or index number. Here are some jQuery methods that you should lookup: each, find, children, parent. I setup your example to create coin objects, which contain all the properties you need to create the different timelines. http://codepen.io/osublake/pen/XbOpeP
  5. Hi Jan, You can use Function.prototype.bind() to add callbacks with that signature. myCallback.bind(myScope, ...args) http://codepen.io/osublake/pen/1a3554603efa853961df1ea356b4deb4
  6. OSUblake

    bezier circle

    I like Diaco's second solution for creating circular motion. There's no point in using a Bezier if you don't need to. I updated the my example using the ratio you are using, which is a lot more accurate.I added a real circle to test it, and it's spot on. Ratio: 0.552284749831 Source: http://stackoverflow.com/a/27863181/2760155 CodePen: http://codepen.io/osublake/pen/xGmMzj/
  7. OSUblake

    bezier circle

    I didn't look at your math, so I don't know what you did, but a circle is octagon shaped. Here's an example using SVG. I added some extra code in there to help visualize it, but the bezierPlugin is using data from the values array. http://codepen.io/osublake/pen/xGmMzj/
  8. OSUblake

    Size of libraries

    Here's a pretty good explanation about the differences. https://css-tricks.com/the-difference-between-minification-and-gzipping/
  9. OSUblake

    Size of libraries

    The file size numbers on the download page are for the CDN, which is gzipped. There's a big difference between minification and gzip, which is typically done by a server and has to be uncompressed by the browser.
  10. Ha! The problem was very simple and obvious, but only because I created it. When I made that first demo with the images, I added window.stop() to init function, which stops the browser from downloading. I added that as an easy way to stop the images from downloading when you change the tile size. I really wasn't thinking about how it would affect other things because it was intended only for that demo. So your video wasn't downloading because I stopped it. Glad to hear you're learning the dev tools. It's definitely worth taking the time to learn them. I was able to identify the problem very quickly because I saw in the console that the download was being stopped. GreenSock support is only for GreenSock related issues, so you're not going to get help with other issues. If you're just starting out, I would probably hire somebody. Plus you would probably learn a lot from them. If somebody is freelancing, there probably isn't going to be any conflict of interest unless they have some NDAs that specify that. As far Safari goes, I can't tell because my Mac won't start. I didn't test the image demos in other browsers, but it's probably a CSS issue. My best guess is that it has to deal with the transform origin or the scaling. http://codepen.io/osublake/pen/a9e31d22a0e2995136572b4f0b7b8e59/
  11. Rodrigo's advice is pretty sound. You're trying to use your timelines like some type of animation manager or controller. Try to break down what you are trying to do into steps, and then create your animation from that. Here's how I see it. Given that you are on a current page and you want to animate to a selected page sequentially. - The current page will move offscreen - Any pages in between will move onscreen and then offscreen - The selected/last page will move onscreen By using the index of the current and selected pages, we can create a range of pages that need to be animated. Now we can setup a timeline that will follow the steps listed above. I added some extra pages to show it animating the pages in between. http://codepen.io/osublake/pen/2f5b1274280a9c147173f7fc498238de
  12. There is no tool. I'm just using Draggable to move points around and then updating an SVG path. I use code from that spiro.c file to calculate the Bezier values for the path, which is just one big polynomial function.
  13. There is no style attached. I told you to change the paths because there are no folders. Wrong <link rel="stylesheet" href="css/grid.css"> <script src="js/index.js"></script> Correct <link rel="stylesheet" href="grid.css"> <script src="index.js"></script> And you're missing a ton of files. The files don't have to be local. You can link to anything, including your own server. I can help you figure out problems with the sortable grid, but you need to fix things on your end first. I'm guessing you don't know how to use your developer's tools, because you'd probably find the source of your problem real quick. Before you do anything else, please learn how to use them, especially the console. The console will show you errors and what file and line number they occurred on. Here's a good place to start, but there's also some pretty good videos on YouTube you can check out. https://developer.chrome.com/devtools https://developer.chrome.com/devtools/docs/console Show me an error free version of your site and I will look at any problems with the grid. I would start the script.js file because it's not using valid JavaScript.
  14. I think referencing the window like that is odd. If I had a collection of animations, I would add them to object or an array. Objects are nice because you can reference them by a name. http://codepen.io/osublake/pen/dowNRP?editors=101
  15. Eval is ok if it's your data, but it's slower and not commonly used. If you can access it with square brackets, go with that method. I would only use eval as a last resort.
  16. I really can't setup anything on my computer right now because I'm preparing to do a wipe for Windows 10. CodePen doesn't have a file system, so use Plunker instead. You build it just like a normal website, and there is a button to run and stop it. You can't upload files directly, but you can copy and paste them into a file by clicking on the new file button. There's also no folders, so you might need to change the paths. Also, you can't save images on Plunker, so just use loremPixel instead. var baseUrl = "http://lorempixel.com/"; // set the width/height of image var images = [ "300/150?i=1", "300/150?i=2", "300/150?i=3", "300/150?i=4" ];
  17. You're running a loop, so use the index to create the timeline labels. var start1 = "start+=" + index * 0.4; var start2 = "start+=" + index * 0.6; http://jsfiddle.net/OSUblake/ojra10c8/
  18. It's cool... which part were you referring to?
  19. Thanks guys! I've also noticed recent slow downs and weird errors popping up on CodePen. I think some of the problems might be related to them transitioning some things over to Amazon Web Services. However, I know my problem isn't related to that because they wrote about in their blog. Oh well, at least I now know what the problem is and can work around it. The font editor is FontForge, but the part that I used is called Spiro. Everything I used was taken from the spiro.c file. Lynx, everything Carl said is spot on. Animating a control point is nothing more than changing it's x, y coordinates, so nothing special about that. What makes controlling these curves so easy is that there is only 1 control point per segment, and the curve will go through that point. I really don't know of a good way to use an image for a path. The only thing I can suggest is using something like a mesh in Pixi.js. This script really wasn't designed for anything like that. In fact, it's not tied to a renderer so it doesn't control how the curves are drawn. The only thing it does is calculate cubic Bezier values based on the control points you feed it. What you do with those values is up to. You could render them on a canvas, an SVG, or even use them with the BezierPlugin. Even if using an image for a path was an easy thing to do, I'm having trouble understanding how that would look coiled up. It seems like the image would have to be really long and narrow, and at that point could you even recognize what the image is? I didn't know this, but Inkscape actually has this effect built in. You might want to download it so you can play around with the effect. Here's a pretty good video on using it, but please note that the triangle-in feature he shows won't work with my code.
  20. Creating realistic movement of a coil being unrolled is no easy task. Connecting all the different curves together requires using some type of transition curvature like a clothoid/euler spiral. This is what engineers use to make the geometric design of highways, railroads, and roller coasters all nice and smooth. Carl wasn't kidding around when he said that you would need some pretty solid math skills to do this. There is a lot of calculus involved, and I'm not aware of any JavaScript library that can do this. A couple of weeks ago I found some font-drawing software on GitHub that does a nice job of creating curves. I was able to port the curve design code over to JavaScript and got it working with GSAP. I must say that the results are absolutely amazing. Unfortunately, when I tried putting it up on CodePen I ran into a lot of problems. I never noticed this before, but CodePen runs some stupid script that injects code into your loops that is supposed to prevent infinite loops from happening. Sounds nice and all, but it does the complete opposite for this project and keeps creating infinite loops, breaking everything. I know how to fix it. I just need to convert all my loops into functions, but I really don't feel like messing with it right now. I'll get back to it in a couple of days and put it up online so you can play around with it. In the meantime, here's a video of me playing around with some SVGs and Draggable. Look how easy it is to draw a path while maintaining a continuous curve. Try doing that in Illustrator and let me know how it goes.
  21. Nice! I was too lazy to copy them. Too bad there's not an easy way to link to the different constructor properties.
  22. For the most part that is correct, but a click event does not always fire. There is a minimumMovement value that determines the threshold to start dragging (default = 2px). So if you click on a draggable and the mouse moves more than 2px, that will be considered a drag and a click event will not fire. Also note that there are properties on a draggable you can use to check it's state. .isPressed .isDragging .isThrowing
  23. What's going on? It's hard to tell without seeing the problem. If you can create a CodePen with the problem, I'm sure I'll be able to figure it out real quick. And where is the YTplayer in your HTML? If you have it inside the div#list, that might cause a problem because it is updated dynamically in the code.
  24. Clip is not part of Draggable, so adding that is not going to do anything. There's actually a really nice version of this on CodePen. It was kind of dated so I updated it to use the latest GSAP features and the throwPropsPlugin. Please note that the throwProps is a member's only plugin so it will not work outside of CodePen. http://codepen.io/osublake/pen/doQRGo
  25. Look at the comments Diaco left below his code. If you're not using jQuery, there is no selector property, so that could be your problem. If that's not the issue, make a demo so we can check it out. Or you could try that helper function I made above which will return a unique list of all the elements. The reason I made that is because a timeline target is not always an element, which might be the source of your problem. It could be a jQuery object, a node-list, an element, a string, a function, an array of different things, etc. Check out my demo above. I mixed a bunch of timelines and random things together just to show how it would sort out unique targets.