Alpha / opacity masking with animation, best way? about svg.js HOT 4 CLOSED

I think you can simplify it:

var stop1, stop2

/* create svg canvas */
var draw = SVG('canvas')

/* create gradient */
var gradient = draw.gradient('linear', function(stop) {
  stop1 = stop.at({ offset: 0, color: '#000', opacity: 1 })
  stop2 = stop.at({ offset: 100, color: '#fff', opacity: 1 })
})

/* create image */
var image = draw.image('/us_assets/svg/img/image.png', 200, 155)

/* create mask */
image.maskWith(draw.rect(200, 155).fill(gradient))

/* animate gradient */
stop1.animate(2500, '>', 1000).attr({ offset: 100 )
stop2.animate(2500, '>', 1000).attr({ offset: 200 )

I didn't test this but this basically that should do it.

from svg.js.

Ok I got it to work going in one direction, thanks! This could be a really powerful feature. Still trying to see if I can 'wipe-on' not off. Also the animations seem to overwrite each other. So if I wipe off, then try and wipe on with a later delay it breaks.

http://codepen.io/sju/pen/FEDqf

from svg.js.

Great to hear it worked. It's not something to build in into the core library but it would make a nice plugin. Plugin's are really easy to write for svg.js.

from svg.js.

The latest release makes it easier animating gradients. But there are drastic changes in the accepted values. More here: http://documentup.com/wout/svg.js#gradients

from svg.js.