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. It's been a while since I've learned JS and jQuery, so I'm not really not up to date on any good resources for those topics. Perhaps somebody else could recommend something. I've always found video tutorials to be the best way to learn new topics. That's why I maintain a subscription to PluralSight, which also includes Digital Tutors and Code School. It may not be free, but it's definitely worth the price. It's so much easier trying to learn something when you have somebody explaining the key concepts to you. And in most of their courses you usually build something that is practical and applicable to the real world.
  2. Wow! That's a pretty cool parallax effect you got going on there. I haven't used video much, so I really can't offer much advice on that front. But if you are using video as a background, you might want to look into drawing it on a canvas. That will give you more control over the video like manipulating it in real time. Learning how to use the canvas can be hard, but it also has a great side effect. You will become much better at JavaScript because you kind of have to use your imagination and build everything yourself. So this is kind of old and you may have seen this before, but I still think it's pretty amazing. Blowing up a video in canvas... http://craftymind.com/factory/html5video/CanvasVideo.html
  3. I wouldn't use UIKit for the simple fact that their draggable is broken. It will not work on webkit browsers (Chrome, Opera) when there is a touch screen present. I don't know if they realize this, but touch screens are pretty common in Windows devices, especially laptops. The source of this problem is very apparent in the first couple lines of code they copied their sortable script from, but I'll let them figure that out. So about your code... I don't see anything that would cause a problem. In fact, I tested it out, but I used GSAP instead of CSS. I think results are pretty amazing. I never really thought about using it for an image gallery before, but it seems to work great. http://codepen.io/osublake/pen/jPpOaO/
  4. Unfortunately the tiles aren't created with HTML, but the jQuery part of it is really easy. Most of the code you need to change is at the top of the createTile() function. The most basic way to add an image to the tile is to do something like this. // Change this... var element = $("<div/>").addClass("tile").html(label++); // to this var element = $("<div/>").addClass("tile").html("<img src='my-picture.jpg'/>"); The only problem with this is that all the pictures will be same, so you're going to need a way to feed it an image. You can pass in the url of your image where the createTile() function gets called in the init function(). So now you would need to add this to the createTile() function. function createTile(url) { var image = $("<img />").attr("src", url); var element = $("<div/>").addClass("tile").append(image); } That's really all you need to do to add an image. However, there are other factors you may need to consider, like how to deal with the loading of an image, and if you should display the tile if the image hasn't loaded yet. The demo I made makes sure an image is loaded before it is displayed, so you will notice a delay when adding a new image. The demo is also getting images from lorempixel, so I'm not feeding it a url like I described above. I have to manually create the image in the createTile() function and setup some parameters to get the right sized image from lorempixel. I know the code in that demo can be hard to understand if you're new to JavaScript, so the other day I created a really simple version of it which should be easier to follow. The only thing it does is basic sorting when you stop dragging, but it's the exact algorithm used by the other demo to determine the order of the tiles. Simple version: http://codepen.io/osublake/pen/pJKRWy Full demo: http://codepen.io/osublake/pen/rVKEQm/
  5. Try using the onComplete callback to create your event handlers. http://codepen.io/osublake/pen/JdZqEo
  6. Glad you got it working! Sorting is a pretty complicated thing to do, and these demos show that you can do it in less than 50 lines of code. Although not a fair comparison, the draggable in jQueryUI is about 1000 lines of code. And about GSAP leaving style tags around. This is how you usually change the style with JavaScript, so it's not unique to GSAP. You may not have noticed this, but when you change a CSS style with jQuery it does the same thing.
  7. There might be an easier way to do this, but you could just create a reversed list of your elements. http://codepen.io/osublake/pen/055110560dea89197467311fc0172140
  8. Ha ha. I just did this last night for somebody. Let me change the some of the code around since it's using their server. I'll post back later with the updated code.
  9. Posted same time as Carl... You aren't passing an array, you're passing a string. To pass an array, put an array inside the array. You place your params inside the array, but it doesn't actually pass it because it calls Function.prototype.apply().
  10. If that's not the problem, check out this thread. You are probably putting your JavaScript file in the head without using an onload event. http://greensock.com/forums/topic/11835-which-browser-do-i-have-to-use/
  11. Sounds like you might not be selecting the right element. Check your selector and make sure is spelled correctly. See how I created that error. http://codepen.io/osublake/pen/EjRbjN
  12. I know this can be confusing, but the reason it isn't working is because 'x' is a CSSPlugin value. If you look at the documentation, it states that this method will only work for non-plugin values.
  13. Hi eliajf, The problem with what you are doing has nothing to do with GSAP. You are changing the HTML structure on elements that are positioned relative. It doesn't matter if you used another library, the same thing would happen, so you're really not cleaning up after GSAP. And having GSAP remove the style when you kill doesn't make much sense since it would revert it back to its default state. So my demo that you linked to would completely fall apart. All the tiles would move to the top-left corner and their size would be reduced to 0. To help you out, I simplified my demo to the bare bones. It should be much easier to understand, but it's not going to do anything fancy like pushing the tiles out of the way while you're dragging. http://codepen.io/osublake/pen/pJKRWy/
  14. Hi farhoudz, Here's a fork of your demo. I just commented out some of your lines. The problem you were having is that you were calling the createRipple function on every click, which was overwritting the original timeline, so the radius always started from 0. I just separated the click and timeline creation functions. http://codepen.io/osublake/pen/WvyoRK
  15. Interesting. I did not know that. I never tried to do 3D transforms, but I thought it was possible because I've seen it done before. I went back and looked at those examples in Firefox and IE, and they are definitely broken, like this isoscape. http://codepen.io/sdras/pen/BinLh/
  16. Looks like it might be a bug. I just changed the GSAP version to 1.16.0 and it started working. http://codepen.io/osublake/pen/vOjbgZ
  17. It can look very cryptic at first, but once you understand what all those letters and numbers mean, it becomes much easier. To start learning SVG, I would start at Jakob Jenkov's site. He does a great job of explaining the basics. http://tutorials.jenkov.com/svg/index.html
  18. When I first started learning positioning, most of my problems revolved around not setting the position of the parent element to either relative or absolute. If you try to position an element relative to its parent and there is no position defined on it, its going to keep going up the document tree looking for a parent that has a position defined on it. If there are none, it's going to position it relative to the body. Another problem I had was not setting the initial top/left CSS properties for an element that was positioned absolute. If you place an an element with position:absolute directly underneath an element with position:relative, it's not going to be in the top-left corner like where you might be expecting it to be. Setting the top and left to 0 will place back in the top-left corner.
  19. I've done a ripple effect like that before, but I used the canvas instead of scaling an element. To make sure the growth of the circle looked constant no matter where it started from, I had to calculate a radius that would cover the exact size of the window. You can do this by finding the largest distance between the starting point and all four corners of the window. http://codepen.io/osublake/pen/eNrQqV/
  20. I'm not trying to knock the demo that Carl linked to. Mike Brondbjerg did a great job on it, and it's very impressive. But trying to use that many SVG polygons in a normal animation is not going to work. At least not until SVGs become GPU accelerated. The animation in that demo seems to run pretty good, but there's a little deception going on. You're controlling the frame rate with your mouse. Check out the same animation running as a normal tween. http://codepen.io/osublake/pen/297954bb0fc3f5afe0ad6c03e7ea85a4/ It's almost unwatchable in Firefox and IE. I can only imagine what would happen if you tried to load that demo on your phone. You might want to explore other ways of doing this, like drawing your SVG elements onto canvas elements, or using a sprite sheet.
  21. You need to capitalize the 'B' in the tween selector, which is case sensitive - "#redBox" not "#redbox" I don't think Jack knew that the tween was paused when he wrote that snippet of code, so the tween is going to stay paused. If it wasn't paused, that would work just fine. There are other ways around that, but since you're learning I would just use what Rodrigo suggested and start tweaking it from there. http://codepen.io/osublake/pen/PqeNML
  22. That's really weird! What did you do turn into open/closed quotation marks?
  23. Nice! Did you use the custom ease plugin that @frux posted the other day, or just modify the Back ease?
  24. OSUblake

    Graphing with GSAP

    I fixed my demo to work with Firefox, and it doesn't seem that bad. I wonder if that is because I'm using the image tag, and maybe Firefox is caching it? With IE, you can't convert an SVG to an image using the canvas. However, the SVG will still show up on the canvas, so you could just use the canvas element instead. The only problem with that is the canvas won't be part of the SVG document, so it might not scale the same as your SVG. If that might be a problem, you could use something like Fabric or canvg to convert it. For the zooming it sounds like you got that figured out. That's exactly what I would have done. If the zooming is done at set intervals, then you might want to try and cache the ending zoom level right before it starts. That way you wont see any pixelation when you are zooming in. http://codepen.io/osublake/pen/MwVymw?editors=001
  25. OSUblake

    Multiple TweenMax

    All those try/catches are unnecessary, and really confusing. Just follow what I did. You can keep adding as many versions as you want. http://codepen.io/osublake/pen/a1325263d93f0085a4e9df87e215e58f?editors=101