Search the Community
Showing results for tags 'mask'.
Found 41 results
-
Hello Is it possible to create a shape mask, similar to how it was done in Flash where one shape overlaps/mask another shape? I have tried to use mask in the timeline (Animate timeline/layer) together with TweenMax but it does not seem to work. Very thankful for any advise.
-
Hi! How would one go about targeting a mask for animation that is nested inside a movieclip. .from(this.movieclip.mask, 1, {x:"+=100"},"+=1") does not work for me. Thank You Salakala
-
This seems like such a simple question. But I spent the last 2 hours trying to figure this out to no avail. I even asked a coworker with some experience in SVG. Why can I not change the Mask call out from "ID" to "Class"? In my example you can see that I simply copied the code from this original post ( http://codepen.io/PointC/pen/KzmXYK ), and pasted it using classes in stead of IDs, and it breaks the mask. What am I missing? This technically isn't a GreenSock question, but I am feeling a little desperate. Thanks for any help!
-
Hello everyone, I'm looking for a hint, as you can see in the Codepen attached I managed to drag a masked SVG circle around the container, problem is when I want to use a path as a mask I don't know how to get the coordinates (for path there's no "cx" and "cy"). Any suggestions on how I could accomplish this? This is the function that does the trick with a circle //move the mask with the drag function onThrowUpdate() { var posX = parseInt(rocketHole.getAttribute('cx')) + this.target._gsTransform.x; var posY = parseInt(rocketHole.getAttribute('cy')) + this.target._gsTransform.y; TweenMax.set(rocketMask, { attr: { cx: posX, cy: posY } }) http://codepen.io/Polenji86/pen/KNeZOE
-
Hey there, I'm trying to use TweenMax to animate an image inside a SVG clipPath. The problem is: when the transition is happening, the clipPath deactivate on Chrome and appears only after animation stops. On Safari and Firefox works just fine. Anyone can help me? Is a compatibility issue or am I doing something wrong? Thanks guys!
-
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?
-
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.
-
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?
-
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.
-
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.
-
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! -
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
-
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
-
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?
-
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?
-
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!
