Jump to content
GreenSock

mintervals

Alpha masking / animating

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×