Alpha masking / animating

[mintervals]

Hi there, 

 

I think I may have finally gotten alpha mask animation working with svg.js.

 

I was wondering if there is anyway I can plug this into GSAP to get better control of the animations / elements. 

 

Also is there something in the works to have GSAP do this? This is the one feature from Flash I miss the most.

 

See the Pen FEDqf by sju (@sju) on CodePen

[Carl]

Hi, 

 

Interesting, I'm not really familiar with svg.js, but if you can target the id of the stop elments its pretty easy using the AttrPlugin (included with TweenMax)

 

TweenLite.to("#SvgjsStop1003", 2.5, {attr:{offset:1}, delay:1});
TweenLite.to("#SvgjsStop1004", 2.5, {attr:{offset:1}, delay:0.5});

 

http://codepen.io/GreenSock/pen/AymEd

 

 

instead of having normal getter/setter methods like

something.setOffset(20); sets

something.getOffset(); //gets

 

or

 

1 method that does both

 

something.offset(20) // sets

something.offset() // gets

 

svg.js' attr() method recieves an object instead of a single value which makes it impossible (without a custom plugin) for TweenLite to get the starting offset value of that object (which is necessary inorder to run a twee).

 

So you could do something like this where you tween a value and then apply it attr('offset') like so:

 

var obj = {offset:0};
TweenLite.to(obj, 3, {offset:1, onUpdate:function(){
  stop1.attr('offset', obj.offset);
  }
});

you can paste that code into my pen (remove previous code) to test

[mintervals]

Cool thanks a lot , I'll keep working at it! I got good old masking down with a hard edge, but this opens up some more possibilities for the soft fade wipe effect.