Scotty

It'll get there, I promise! Thanks for the interest in it!

Hey everyone, I'd like to share a final in-the-wild example of a handwriting reveal effect using HTML5's canvas and GSAP to handle the drawing animation. I'd like to make a codepen of this soon with much better code (I'm doing some stupid stuff here) but as I'm getting married in a couple weeks and with work being very busy, the time isn't there for that right now. With help from searching the forum and information on canvas transparency found at this link, I was able to make this effect happen. We think it turned out very nice! Just view the page source code and scroll to the bottom, nothing's compressed. I'm using two function calls for the "brush size", it's a stupid hack but it works. I call the brush functions 4 times because on some devices (iOS) and browsers, the exposed layer did not always reveal correctly as expected. The time nudge value is set to make the animation quick while allowing the transitions to reveal smoothly. Again, this is not optimized! GSAP is being used to tween floats used as physical X & Y co-ordinates on the image. I got the co-ordinates for the animation by using photoshop with a similarly sized brush and just hovering over the image with how I wanted the straight lines to be drawn, and getting the X & Y values from there. Very simple! http://pmi.mkt6308.com/pba-certification Note: You could also load in an image instead of embedding the image for the mask in javascript, but because the hosting site is a managed CMS, it doesn't see links to images in JS, therefore I can not link to it. This is a workaround. Thanks for the great support found in these forums!

Yep. I was just hoping to see if this was a known occurrence in IE8 with this transform. I haven't had any issues with GSAP in IE8 otherwise.

Hi, Thanks for the reply. Got all the bullets you have and been there, done that, etc. And it's the same on a laptop I have with IE8 on it. VMWare has been pretty solid for this stuff in my experience. This project is too big to put on codepen, plus it's not "live" yet so due to client-confidentiality, etc. etc. I don't want to post a public link to it, but I could send you a PM if you want to take a look at it. I'm still going through and trying to narrow down what may be causing a conflict. I've gotten it to work in some scenarios so far.

HI there, I'm experiencing a bizarre issue with IE8 and the rotation transform code that GSAP is producing. I'm trying to narrow it down to either my bad code, IE8 or a possible bug in GSAP. It may be my code but that's why I'm asking here. The problem is with the first rotation transform on an image. It's not keeping the image centered using the margin offset in the rendered code. Calling the rotation command a second time, however, inserts the correct margin centering code. Take this line of code: TweenMax.to( '#stairs-container-bottom', 0, { rotation: -30 } ); I'm seeing it render out this initially for IE8: filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.86602, M12=0.49999, M21=-0.49999, M22=0.86602, sizingMethod='auto expand') ; MARGIN: 0px; ZOOM: 1; DISPLAY: block The problem I'm seeing is the margin is set to 0, causing the graphic to be offset from the center rotation point visually. If I call the rotation command again, it renders out with the correct margin to keep the image centered: filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.86602, M12=0.49999, M21=-0.49999, M22=0.86602, sizingMethod='auto expand') ; MARGIN: -31px 31px 31px -31px; ZOOM: 1; DISPLAY: block; Has this been reported before? Is it something I'm doing? I'm testing this in a VMWare image of Windows 7 with an IE8 install version 8.0.7601.1.17514 Thanks for any direction

FWIW, the way I fix the black outline on transparent images for IE8 is to save out the image as a GIF or 8-bit PNG. You'll lose image quality of course with 256 color limit, but it will work. I only bring in this low-quality sprite for IE8 users using some form of detection, either IE conditionals or modernizr. Hope that's useful