I'm using Raphael 2.1.0.
When I animate the opacity of a transparent PNG under IE8, the transparency animates well. ie: 'from' an opacity of 0.0 'to' an opacity of 1.0.
After the opacity animation has ended, I want to set/restore the image's position/opacity to a pre-animation state, but the alpha channel of the image becomes opaque. Where there was once a transparent background there is now a white square.
With an SVG renderer - Chrome and Firefox - things are fine. I've tried chaining the image, translation and alpha to no avail.
Here's the code:
var element = this._paper.image(image.Url(), 0, 0, width, height);
var removeOnStop = true;
var fromParams = {}
var toParams = {};
// From options
fromParams.opacity = options.from.alpha;
// ...
element.attr(fromParams);
// To options
toParams.transform = 'T300,300';
toParams.opacity = options.to.alpha;
// Animate
var anim = Raphael.animation(toParams, duration, 'linear', function() {
if (removeOnStop) {
element.attr({ opacity: defaultProperties.alpha });
element.transform('T' + defaultProperties.left + ',' + defaultProperties.top);
}
}).repeat(repeat);
element.animate(anim);
Any help would be greatly appreciated.