Jump to content

Search the Community

Showing results for tags 'mask'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. Sorry if this is a dupe but couldn't find anything specific to it searching. The codepen uses some code that Blake came up with to animate color lines and draw out masks for each path to reveal it, and then draw the masks back in to cover them back up. The effect is that it looks like multi-color animating lines are being drawn in, rotating a few times and then drawn back out. It works great except for this - when running the codepen you'll see at the very end, there are little remnants of the underlying paths. I've monkeyed around with stroke-miterlimit and a few other things but am still unable to figure out how to completely cover the paths with the correct masks. It varies with different SVGs too which makes me think it has to have something to do with miter settings. Has anyone encountered a similar issue and found a solution?
  2. Starting by setting up a dashed line animation on a rectangle behind a mask. Then trying to use drawSVG to draw in the mask and make it look like the dashed lines are drawing in and continuing to animate. I don't see a draw in of the mask, just looks like rectangle being masked is peeking out from under the mask on the edges and then suddenly appearing. I'm screwing something up here. Been fighting this simple task all afternoon.
  3. I'm using Blake's awesome gradient colors code used to create this older codepen. http://codepen.io/swampthang/pen/wWPRzW I need to make it look like the SVG draws in while the lines animate and then, after a period of time, draw out. I was able to create something that approximates this here: http://codepen.io/swampthang/pen/jAQkqv Problem is, the client wants the lines to be animating as they draw in. So I thought, hmm, if I can create a mask for each path and assign it to each of the paths in the SVG, I could use a staggerFromTo to draw out the mask to reveal the animating gradients in the masked paths and then draw them back in to hide them again. I'm attempting to dynamically add mask paths to an SVG to cover up the initial image but am unable to get this to work. Anyone know what I'm missing? Do the masks have to be in the same grouping structure as the paths to which they're assigned?
  4. Hello! To be able to animate masks, I started using svg. My goal was to keep it really simple and also have support for all browsers (incl. mobile) and IE10+. I found this site, which described a way to achieve what I want in a perfect way: https://thewebstorebyg.wordpress.com/2013/12/29/cross-browser-svg-masking-supports-ie8-ie9-ie10-firefox-chrome/ Based on that info, and a post on this forum recommending to use the AttrPlugin to be more cross browser compatible, I've created this: http://codepen.io/treemok/pen/gMpaVX?editors=1010 While it works great in all browsers, I'm running into some issues: 1. I'm getting an error TweenMax.min.js:16 Error: <image> attribute y: Expected length, "null" TweenMax.min.js:16 Error: <image> attribute x: Expected length, "null" 2. I'm not able to use "scale" at all or independently change "width", or "height" properly. Any help would be great! Thanks.
  5. Hello there, I’ve just updated an ongoing project that makes use of clip: rect() animations to GSAP 1.18.3 and it seems that said animations no longer work, on any browser. Clipping values are properly set, but they are now changed instantly regardless of the wanted durations and easings. 1.18.2 seems to work fine. Is that on purpose? I know the CSS clip property has been set to be deprecated for a while, but given the poor browser support of clip-path, its so-so performances and its downright unstable behavior at times, I feel like clip’s days are not quite over yet.
  6. Hello fellow Greensockers! My conundrum is as follows: - I'm trying to layer several images on top of one another - Each image is masked with a curved / irregular shaped SVG mask (could be PNG or SVG Path or external SVG) - Each mask needs to animate - Now heres the kicker, each image needs to be clickable / interactive within the constraints of the mask area I forked Jonathan's example (http://codepen.io/jonathan/details/OyarJK), as it was already using an animated SVG/PNG mask which ticked off the 1st 3 points above. My fork is here - http://codepen.io/timostsauber/pen/zqzmKV I am using a SVG Path for the 1st mask, and a SVG file for the second mask. Just to test both. So the 1st one is not using attr for animation whilst the second one is. Each image has a hover event listener, but as you can see the top image clickable area takes up the entire banner, outside of the masked area. I realise I can achieve this with separate, invisible buttons on top of the SVG image masks, but this would mean code duplication, and also animating the invisible buttons to move with the masks + images. I tried various combinations of pointer-events on the image / SVG layers, but to no avail. So I'm very curious to know if this is possible, as this method of masking seems to be the best and most cross browser friendly. Thanks for any help in advance!
  7. Just curious- But in Chrome/Safrai - the svg animation flickers (at the end of the animation) and the mask is almost reset. I would like the animation to end on the solid white color. (this works in Firefox). I must be over looking something. Any help would be helpful. thanks
  8. Hi, I'm creating a simple polygon svg shape, and using it to mask an image using the clip-path:url(#id) method. I'm then trying to animate this using GSAP. This works fine, except in FireFox, where no animation occurs. This can be viewed at this codepen: http://codepen.io/rorytawn/pen/OVeWNB. All I'm trying to animate is simple 2D transforms like x and scale. I know FireFox has some issues with clip-path, so I tried animating the same shape, when it is not used as a mask, and that works fine in FireFox. So the issue is something to do with animating the svg when it is assigned to clip-path. I tried another example using GSAPs AttrPlugin, which does work in all browsers including FireFox. Codepen here: http://codepen.io/rorytawn/pen/MwMbVx. But as far as I'm aware, this won't allow me to animate using css features, rotation, skew etc. If anyone can please point me in the right direction to get the first example to work in FireFox it would be much appreciated! Many thanks!
  9. Hi! How to use the GreenSock to create multiple masks for one layer? Please share code. Thank you in advance for your help and sorry for my english
  10. Hey all, Got a bit of a quandary going here. So what I'd like to be able to do is to move the points of a polygon contained within a mask a variable amount (in this demo, 400 pts). A pen can be found here: (FF only) codepen.io/johnblazek/pen/CqEpd I'm using the attrPlugin, and adjusting the x/y coordinates within the point, but I'm getting no luck. Could the fact I'm using this as a mask be messin me up?
  11. Imagine having a set of light rays surrounding a circle - just like the sun. What I want to do is reveil the rays, so the appear to be "rising" from the sun. In Flash I would be able to create a nice effect for this by doing something like the following steps: - Divide the rays into x amount of groups (symbols) - Create a circle mask that will scale up "grow" to reveil the rays - Run the circle mask with 0.3 delay on each of the x amount of groups I figured that I could emulate something similar with the clipping mask, but that only works with rectangles?
  12. Hello ... again. I read about the blitmask now, and it is (mostly) clear to me, that and why it's a rectangular sprite. Now...I am pretty sure, that it is possible to create a Bitmap Data object, that is built a little bit differently. I am not good enough to do it in AS though, and so I just like to discuss my idea with you guys. So, my theory is that the bitmap data object is a bit like a matrix filled with pixeldata. If there was a circular algorithm built in, one could - row after row - check out the needed pixels (opaque), and the ones we dont need (transparent) and thus build a circular blitmask. The same would then even work with elliptical shapes - divisionwise...on one of the x or y axis. Yeah...you know what I mean, eh? Well..yeah. That's it for now. Are you on that already? Is there some error in my idea? Is it already achievable with some of your great stuff? Is it silly implementing what AS3 can do (well...you do that all the time dont you? ) Let me know..I'm pretty darn curious. Peace! EDIT: I rethought and...is it a good thing to mask the blit-masked MC with a cirular shape. It doesnt seem that clean actually, hmm.....but the "normal" mask only masks a single and shrunk Bitmap then, and it could be performant. But I still think, that this is a rather dirty workaround, right?
  13. Hi all, I'm exploring the possibilities of animating with GSAP in javascript after doing it for years in Flash. While discovering the nuances are fun, I'm finding the edges where Flash made it somewhat easier.... at least for now! I'm trying to recreate an animation I did in Flash but in Javascript. Essentially, it's a masked image that it "scratched" off to reveal an image underneath. Think of a lottery ticket with the silver scratch off stuff... I'd like to animate the reveal with a swiping motion. Any help/ideas on how I would best approach this? A quick google search for animating masks in Javascript turns up alot of SVG usage but I'd like to know how to do this with GSAP. thanks in advance for any thoughts!