Share Posted June 20, 2013 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 Link to comment Share on other sites More sharing options...
Share Posted June 20, 2013 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 Link to comment Share on other sites More sharing options...
Author Share Posted June 20, 2013 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now