Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Everything posted by Chris

  1. yes, this helped: The other issue was that stars were rotating off center. They were swerving. Removing the resolution fixed this as well: var width = (texture.naturalWidth || texture.width || 0) /*/ resolution*/; var height = (texture.naturalHeight || texture.height || 0) /*/ resolution*/; var width = (texture.naturalWidth || texture.width || 0); var height = (texture.naturalHeight || texture.height || 0); So far, I mostly need canvas for particle animation in banners. And that means it needs to be small in file size and compatible in all cur
  2. Really good resources to learn canvas, @OSUblake! I read everything you've posted and really enjoy playing with the code. The CPU usage is much lower compared to using divs - just what I was hoping for. I've used your fountain code and updated it for my needs. I tried to set it up in a way where it is easy to update the variables and create multiple canvas animations with the same code. It works great everywhere but on mobile (iPhone) I can see that the stars are not rotating around it's center. And the "stripes" are not finishing the linear gradient to tran
  3. This is all really helpful - thanks Blake. I'll need some time to work through it and will report back
  4. Thanks @OSUblake, Sorry, I'm a little slow - somehow the email notification are not working for me when I get a response to a post. I'm handcoding all of my banners and don't rely on Animate CC or Google Web Designer. Some advertisers still don't understand the concept that a CDN hosted library shouldn't count against the total K size. This is not an issue with GSAP, since it's pretty small, but I think in the case of pixi I really want to create my own small script using canvas. I've spend some time last weekend learning the basics of canvas and really like
  5. Thanks @OSUblake for you tips and that great demo! I'll definitely look into Pixi.js - but I wonder what the file size is since I'm trying to use this for banner units with a max file size of 200Kb. I'll probably have to code it by hand and rely on Pixi.js for bigger websites. Do you have any experience on using Pixi.js for banners ads or shine some light on file sizes?
  6. Hello happy coders! I found this particle code on another post and updated it make it work for my purpose... see codepen. Every time you mouse-over the black area, 300 particles (divs) are added and animated. While it looks pretty smooth in Safari & Firefox - it's not smooth at all in Chrome. And I know the processor load is pretty high in all browsers. How can I improve the code to make it run more smoothly with less processor load? Maybe using canvas might be a better way to go here - but I have no experience with canvas at all. Maybe there is something else to im
  7. Oh, yes! I just added it and now the scroll works perfectly every time. Sorry, I missed that part earlier. Thanks @Jack!
  8. I have the same issue on iOs as vm6ej04. The scroll only finishes sometimes. Most of the time it just stops somewhere abruptly on its way. Just like you can see on his codepen/youtube link.
  9. I've attached the "actual" look, and what it "should be". Instead of being stretched 500px, and at the top left (0px, 0px) it shows up in the top right and it's only 50px wide.
  10. I've adjusted the codepen to make it more clear. Width should be 500px and height 50px at the end of the animation. But both are 50px. It's also not finishing at x:0, y:0 either... http://codepen.io/treemok/pen/XKbgdx
  11. Without AttrPlugin it won't work in Firefox and IE. Great, that took care of the errors, thanks! But why can I not adjust the scale, or width and height independently? http://codepen.io/treemok/pen/XKbgdx
  12. Hello! To be able to animate masks, I started using svg. My goal was to keep it really simple and also have support for all browsers (incl. mobile) and IE10+. I found this site, which described a way to achieve what I want in a perfect way: https://thewebstorebyg.wordpress.com/2013/12/29/cross-browser-svg-masking-supports-ie8-ie9-ie10-firefox-chrome/ Based on that info, and a post on this forum recommending to use the AttrPlugin to be more cross browser compatible, I've created this: http://codepen.io/treemok/pen/gMpaVX?editors=1010 While it works great in all browsers, I'
  13. Hello, I just figured out that I can save an illustrator file with live text as an svg image with an embedded font! It seems to work in all browsers that support svg. This seems a great way to have the text pixel perfect without having to use a static image (png24). My next thought was to use SplitText, since svg is a dom element with tags and so on. But it's not supported. ;..( I know "it's a different beast", but at the end of the day it's also just text. Sentences, words, individual letters... Are there plan to supports svg text with SplitText? If not, how would I animate svg t
  14. .add("introOut", "+=0.7") is adding an "introOut" label 0.7 seconds after the previous animation finished. The next two lines animations are starting at the same time the "introOut" got created. But you could also add a delay: "introOut+=1.8" would've started them 1.8sec after the introOut label got created. A good resource is http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/addLabel/
  15. Ok, guys. I was just a little too optimistic hoping the z-indexes would always stay the way they were defined in the CSS - even when animated. I reordered the html divs (and my brain) and now all works fine. Thanks!
  16. Well, "clearProps: 'all'" wouldn't work actually if I want to animate the div to a new position: http://codepen.io/treemok/pen/EVjNEb
  17. Thanks for your help! I think at this point it might be useful to explain what each element actually is: #containerDiv = video player #buttonDiv = video navigations #blueBox = background clickTag button Its much easier to keep the video player and the video navigation grouped to be able to animate them together (in 3D space in this case actually). But the clickTag button has to be behind the video navigations but on top of the player. I guess "clearProps: 'all'" is a workaround but that means I can't click on any video player buttons while it's animating.
  18. Hello, I'm running into an issue with z-index when animating a container that has a button in it. See codepen: I want to animate the #containerDiv. Inside is a #buttonDiv with a z-index of 2000 so it's at the very top. Problem: As soon as the parent div gets animated (by clicking the #buttonDiv) the z-index changes and the #blueBox gets moved to the top. How can I keep the button at the top without changing the order of the divs in the HTML? I know when a div has no z-index when animated, it automatically gets "0". So in this case it will move the #containerDiv (incl. the butt
  19. I like sprite sheets for mouse-over images or to simply line up same sized items (like navigation etc) with just one PS document. But I hate sprite sheets just to keep my file count to <10 items. It makes the workflow very tedious. For example: If I want to increase the size of just one item on my sprite sheet, I need to move everything around and redo my all the positions in CSS. This just takes the fun out of simple creating animations. If DoubleClick increases the limit to 20+ that would be great news. Even 15 items are enough to get a basic banner done without sprite sheets. For
  20. Thats a clever solution! Thanks Carl! Only issue that I'm running in is that when the box is not square then it speeds up on quick rollover/off: http://codepen.io/treemok/pen/pJBKYv?editors=011 I thought "overwrite:"none" means that it won't overwrite the current rotation tween until it's done?
  21. Hi, Please see my (first!) Codepen: I'm trying to rotate an object 360º on mouse-over. I want it to always stop at the top again (at the start position) - even when I mouse over several times very quickly. But it overwrites the current tween and then stops somewhere else. In Flash I was able to just say TweenNano.to(evt.target, 1, {rotation:-360}); but that only works once in JS. I tried to add "overwrite:"none" to no effect. Any ideas?
  22. OK, just checked: Works fine in Chrome and Firefox but not Safari (8.07).
  23. Hello, Maybe it has been already pointed out but bookmarking or linking to a docs page is not working. When I click on this link for example... http://greensock.com/docs/#/HTML5/GSAP/TweenLite/TweenLite/ it will reload the page with this start page: http://greensock.com/docs/#/HTML5/
  24. Actually it's pretty easy now (even easier than shown in the above video) to just include GSAP in Adobe Edge. The library now (CC 2014+) has a "scripts" panel which allows to load external or local scripts. Then you can code all the animation yourself. jQuery is not automatically added or needed anymore. Instead Adobe integrated the most important parts into their own library which is about 100K uncompressed. Of course it will be much smaller compressed. So right there would be the question if your project allows for that file size or if you can load it externally from a CDN. I still h