Jump to content
GreenSock

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!

OSUblake

Administrators
  • Posts

    7,527
  • Joined

  • Last visited

  • Days Won

    641

Everything posted by OSUblake

  1. Your selector is using the wrong casing. Change it to ".ctaTXT"
  2. Hey guys, I don't make banner ads so I've never really looked into issues like image size before. I use pngout and pngcrush to optimize my images, but you can only compress an image so much. If you are still having problems getting the file size down, you are probably going to have to get a little creative and use something like the canvas to fill in some gaps. With the canvas it's relatively easy to create, copy, and manipulate images using nothing but vanilla JavaScript. I've been thinking about ways to do this, and got to thinking about how video games during the 8 and 16-bit eras used some pretty interesting techniques to overcome memory and graphical limitations. For example, a lot of spritesheets used in older games are actually a bunch of smaller, separate tiles that don't form a complete image. To form a complete image, the game would piece these smaller tiles together to form a complete image. Using this technique could drastically reduce your image sizes if there are a lot of similar or shared features on your different images. If the only difference between some of your images are colors, you might be able to do a palette swap. Video games use this technique a lot to create different characters, like the first Mario and Luigi. I think one of best examples of this is in the older Mortal Kombat games when they used to use digitized actors. The developers didn't have enough memory to create a bunch of unique characters, so they just changed the color palette on the clothing to create new characters. Some of the palette swapped characters. @fripi, I think you could probably have just one image and do a palette swap to create all the different pieces of luggage, even the image with all the different suitcases sitting next to each other. You would just create a composite image from all the other palette swapped images. Another interesting thing you can do with a palette swap is create the appearance of motion. This is used a lot to create background animations like water moving. Here's a great collection of canvas animations that show this technique off. http://www.effectgames.com/demos/canvascycle/?sound=0 Again, I'm no expert in banner ads so I don't know if it's even worth trying anything I suggested, but it might be worth a shot if you are in dire need of reducing your images.
  3. Hi @fripi, I tried running your project and couldn't get it to work. Some of the CDNs are wrong, and there were a lot of errors about the "bg", which I don't think is declared. I have no experience with Easel, so I really can't offer much help in that department. I know you probably don't want to start over, but if it comes to that, I would suggest checking out Pixi.js. It's a pretty powerful canvas/webGL library, and is used in serveral other canvas projects like the Phaser game engine. I'm not trying to suggest that one is better than the other, but it might be worth your time to at least check Pixi out if this is the type of work you are going to be doing in the future. I'm not going to lie. Learning Pixi can be hard because the documentation isn't that great and there aren't too many examples to learn from. However, once you understand it, you can do some amazing things with it. Basically everything you listed in your first post is on Pixi's example page: light effects, particles, alpha masks, filters, color matrix, etc. Another nice thing about using Pixi is that you don't need to use a plugin to get those effects working with GSAP. Examples: http://pixijs.github.io/examples/index.html?s=filters&f=filter.js&title=Filter Bunnies: http://www.goodboydigital.com/pixijs/bunnymark/ About your project… I'm a little confused about what you are trying to do with the background color. Are you just trying to change the background color, or actually tint an image? Those are two pretty different things, and I couldn't tell by just looking at your code. Like I said before, I don't know anything about Easel, but tinting is pretty easy to do in Pixi with GSAP's ColorPropsPlugin. In case you're curious, I created a little demo using the array of colors from your project. http://codepen.io/osublake/pen/vOVjOR/
  4. If I'm understanding you correctly, all you need to do is just add a matching label on the from tween. If you don't specify a time for the label, it will be added to the end of the timeline, which will be after the scale tween I just added. If that doesn't make sense, check out the position parameter video and examples. It's much easier to understand when you can visualize it. Video and examples: http://greensock.com/position-parameter Updated CodePen: http://codepen.io/osublake/pen/BNqxMa
  5. Hi ohem, What's going on is that your using mouseover, which is restarting the tween every time you move the mouse. To get a hover effect you should use mouseenter and mouseleave. Also, it's probably better to use addEventListener for your events so that you can use more than one event handler. Outside of that, most of what you did is just fine. But since you were wondering about a better/cleaner way to do things, I changed some things around and added some comments. One thing you can do to speed up your code is to select elements beforehand if you are going to keep using them over again, so I added some functions to help you out since you're not using jQuery. http://codepen.io/osublake/pen/QbZrgW
  6. Yeah, in that situation reverse won't work correctly because the new timeline does not know what to reverse those elements to. Luckily, the fix is real easy. I just used a fromTo tween, but you could also do something like clearProps or set when creating a new timeline. http://codepen.io/osublake/pen/5ff9490a104aa93b6824f2639ab7ecc4/
  7. Looks like you are trying to use jQuery without loading it. In your CSS you are setting the opacity of the main div to 0, when it should be the individual divs that the splitTextPlugin creates. http://codepen.io/osublake/pen/bdmobE
  8. If you're asking if you can use SmoothState with GSAP, the answer is yes. Just briefly looking over the README page, it looks like SmoothState is trying to control everything, including animations, so you're probably going to have to do something like @djanes376 suggested. There are other single-page application (SPA) frameworks that will probably work better with GSAP, so you might want to search around for something that gives you more control over the animations.
  9. OSUblake

    The beginning

    Try this link and enter your name and email. https://www.nobledesktop.com/seminars/archive-signup?id=28
  10. Same thing. You just need to type a few extra characters var Anim = new TimelineMax({paused:true}); Anim.to("#foo", 1, {left: "95%"}); document.querySelector("#play").addEventListener("click", function(){ Anim.play(); });
  11. OSUblake

    The beginning

    That's probably a hard animation to start learning from, but the reason you can't find the text is because it is done dynamically using the textPlugin. I would suggest starting out with the Burger Boy animation. There's also a video on how to make that ad, but I can't find it right now. http://codepen.io/GreenSock/pen/Fqmsa
  12. Great idea! That's a pretty good fallback, and you don't have to deal with any server side code.
  13. It will work, but what are you trying to do, sandbox GSAP?
  14. 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
  15. OSUblake

    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.
  16. 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
  17. 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/
  18. 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
  19. 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
  20. 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" ];
  21. 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.
  22. 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.
  23. 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
  24. 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"
  25. 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/
×