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?

.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/

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!

Well, "clearProps: 'all'" wouldn't work actually if I want to animate the div to a new position: http://codepen.io/treemok/pen/EVjNEb

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.

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 button) back, behind the blue box. I just wonder if there is any way to avoid this and keep the original order. Any help would be great!

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 now I would recommend sorting your images into groups, then each group would be a sprite sheet file. So you end up with maybe four sprite sheet images (logos.png, backgrounds.jpg, tune-ins.png, extras.png). The rest would be four or five individual images. I tried "tools" to create sprite sheets but they all have similar issues. You have to rely in a third party websites or apps, and this make it harder to share your projects with others if they don't use these tools. And the file size of the images those tools create, are way bigger than the same file created with Photoshop. I'm using the new PS CC 2015 "export" feature which work very well and the sizes are small. This replaced the old "Save for Web" which didn't allow for exporting png8 with transparency. I also think the PS "Generate image assets" feature is interesting since it automatically creates the images for you based on layer names. Then I can import those images into a SpriteSheet.psd as "linked smart objects". This way the spritesheet automatically updates when I update my main design file. But as you can see - spite sheets just make everything more complicated. So I try to use them as little as I possible.

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?

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?

OK, just checked: Works fine in Chrome and Firefox but not Safari (8.07).

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/