OSUblake last won the day on April 16

OSUblake had the most liked content!


  • Content count

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. Cool websites using GSAP

    That's pretty cool! I've been to that site before, but never looked up GSAP. To help detect websites that are built with GSAP, you should install Chrysto's Chrome extension for sniffing out GSAP on a page. https://chrome.google.com/webstore/detail/gsap-sniffer/ohjmhldioopcachmenfnhlbgmkaohgbb
  2. React and GSAP

    I know people are doing it, but there aren't too many React related questions posted on this forum. I've been wanting test it out, but haven't made the plunge yet. If I was going to start learning it, I would probably start with the react plugin you mentioned, just to learn how GSAP works with the virtual DOM.
  3. The click function is already calculating the window size, so you just need to make a resize event trigger the createRipple() function. I passed in a progress value of 1 so that it doesn't animate the resize. http://codepen.io/osublake/pen/PqdLdB
  4. Animating SVG Image Opacity in Canvas With TweenLite

    There's a globalAlpha property you can tween on your canvas context, or you can convert the pixel color values into an RGBA format and tween the alpha component. Here's some good tutorials on manipulating images. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas https://codepo8.github.io/canvas-images-and-pixels/
  5. Right source for Typescript definitions files?

    I hope I can get it on Definitely Typed, but they're kind of picky with rewrites and want permission from the previous author before accepting it. I know the last one took 4 months to go through, which is kind of ridiculous. If not, maybe Jack could add it the GSAP repo so that it would come with the other files. I know a couple of other libraries like Phaser include their definitions with their repo. One cool thing about the definitions is that they can work with regular JavaScript. Of course this all depends on your editor/IDE, and I haven't really tested which ones have this capability. I also need to make a README.md file and explain how to extend some classes and interfaces that use generics, a concept a lot people might not be familiar with. If you are curious about how some of the classes are written, I had to come up with an unusual pattern to match the structure of GSAP, which you can check out on StackOverflow. http://stackoverflow.com/a/30019474/2760155
  6. Yeah, I figured you would have to break your animation up into a timeline, but the time is working correctly. http://codepen.io/osublake/pen/YXjvbV
  7. From my last example, it should be just as simple as replacing the baseUrl and images variables with your own. var baseUrl = "img/"; var images = [ "001.jpg", "002.jpg", "003.jpg" ];
  8. The JS won't make a difference. I think the problem is your path because it has a lot move commands it in, so it's messing the stroke-dasharray up. Try splitting your graphic up into different paths.
  9. Cannot tween a null target

    The $(document).ready() is for the HTML on your page. You need to listen for a load event on your SVG and have that create your GSAP animations. But since you're using jQuery, it might be easier to just use its load method and use the complete callback to start the animation.
  10. Right source for Typescript definitions files?

    I've been working with Jack and going through the source code to make an accurate and complete set of definitions. It's totally different from the one on Definitely Typed, and I spent a lot of time making sure all the GSAP classes are correctly extended, and that you can easily extend them with your own classes and the correct type. I also added in easy way to extend a global vars interface so that you will have code completion while creating your config objects. It's still a work in progress, and I don't know when they will be done because I have other stuff to work on at the moment. You can check out what I have so far, but I can't guarantee how well they work because I still have some plugins and tests to write. There's also a bunch JSDoc comments I need to add, which is a pretty time consuming process because there is no easy way to copy them from the website. http://codeshare.io/aMbV4
  11. DrawSVG - How to animate external file .svg?

    You can use local storage. Managing it is a different story. Go here first http://codepen.io/osublake/pen/ee120ef1c1fda1c4e6daee895a1855ff Now open up your dev tools > Resources > Local Storage > https://s.codepen.io > look at the key "mySVG"
  12. It sounds like you are doing it right. Maybe your path is a wrong or you are missing a slash "/" somewhere. See if you can get an image to display by just manually putting in a url to the img.src Here's how I loaded in a couple of images... http://codepen.io/osublake/pen/81fb1dc761c77762e7149d24520c97eb/
  13. 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.
  14. 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
  15. 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/
  16. 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/
  17. Prevent rollover state until button is visible?

    Try using the onComplete callback to create your event handlers. http://codepen.io/osublake/pen/JdZqEo
  18. Drag divs leaves gaps, odd positioning

    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.
  19. 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
  20. 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.
  21. onCompleteParams ripping array elements apart

    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().
  22. simplest splittext does not work

    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/
  23. simplest splittext does not work

    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
  24. .updateTo() has no effect on TimelineMax.restart()

    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.
  25. Drag divs leaves gaps, odd positioning

    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/