Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

16 Newbie

About Chris

  • Rank
    Advanced Member

Profile Information

  • Gender

Recent Profile Visitors

3,521 profile views
  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/