Chris

Hello, Sorry for warming up an old post. But since all modern browsers now support blend modes, I was running into the same issue as described above. Is there a workaround?

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 current browsers starting with IE11. I've checked out your latest filter example above, but unfortunately browser support is not there yet for cool effects like blur. I also have to keep an eye on my CPU usage, which needs to stay under 40% (on my system) to make sure it works smoothly even on slower computers than mine. My latest codepen example above is at about 30% -- which is great considering there are about 300 particles animated at the same time. This wasn't possible with my original "div" version. What I would like to work with next are some canvas animation effects to "explode" an image. Or construct an image from pixels that animate in. This would be also a cool effect to animate in a movie title for example. Flash had an effect like this build in, but I could never it it because the file size became too large. I'm open to to learn anything that works cross browser, simplifies the code, and makes me a better animator.

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 transparent. If you have any comments on my code, or if there is anything I can optimize, please let me know. Otherwise thanks again for getting me this far with canvas!

This is all really helpful - thanks Blake. I'll need some time to work through it and will report back

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 it. The script I'm using in my original post (using divs) is pretty versatile and I can create explosions, snow, dust etc. I can even use an image for the particles and also include gravity . I tried to convert my old script using canvas but I'm struggling, since I'm still new to this. If you could help me doing a pure canvas version without pixi - that would be great!

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?

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 improve it?

Oh, yes! I just added it and now the scroll works perfectly every time. Sorry, I missed that part earlier. Thanks @Jack!

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.

Thanks Jack - Yes, all solved.

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.

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

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

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'm running into some issues: 1. I'm getting an error TweenMax.min.js:16 Error: <image> attribute y: Expected length, "null" TweenMax.min.js:16 Error: <image> attribute x: Expected length, "null" 2. I'm not able to use "scale" at all or independently change "width", or "height" properly. Any help would be great! Thanks.

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 text and individual letters otherwise?