Search the Community
Showing results for tags 'masking'.
Found 9 results
-
Hi everyone, I am working on a project where I want to create a blob effect using GSAP. I have animated two blob SVGs using GSAP as you can see in codepen attached below, but I am still learning, and I don’t know how to do everything. I have tried everything, mask-image, -webkit-mask-image but I'm not getting the result that I want. My goal is to mask an image into the blobs, like in the image I have attached. Can anyone please help me with this? How can I use GSAP to mask an image into the blobs? Thank you in advance for your help and suggestions.
-
https://tympanus.net/codrops/2021/05/04/dynamic-css-masks-with-custom-properties-and-gsap/ -
Hi, I'm trying to get an effect of a collection of shapes to come together and fit together (though some of the paths need a clean up ?) I have made a few simple ScrollTrigger animations and can arrange the shapes into where they should be / the general animation however.... I'm really stuck on how to get the shapes on the bottom on the vector to act as a mask for the background image the animation is placed upon. I'm able to make a compound path a set the mask but wondered if anyone had any ideas around how I would be able to mask as well as animate the shapes independently (as they are moving on the y-axis at different heights). Any help would be appreciated!
-
Ok - I need a nudge down the right path on this one. (pun intended ?) From what I read so far - it seems as though I might need to create a mask that is the same size as my circle and try to animate it across the front of the box at the same time the circle passes behind it so that it gives the appearance of the circle passing in front of the box. I want to have the effect of the circle "orbiting" the box such that it passes behind the box on one side and in front on the other side. Right now it is really good at passing behind the box on both sides but I am trying to figure out how to get it to look like it is passing in front on the right side and staying behind on the left.
-
Hi Guys, (and thx for the forum and thx in general to Greensock) I need a simple reveal/masking "trick"? I call it a trick, because i dont belive that there is a direct method for it in CSS/HTML5. I call it simple, 'cause i need it basically in it's simplest form. So: - 2 layers that are interconnected (div's or img's or whatever) - Layer 1 is invisible and controls what is shown of the 2nd layer. - Layer 1 can be animated. (Basic masking - like in the old and very much simpler Flash days ) Anyone figured this out? I see a lot of SVG masking discussed, but thats not what i need in this case. (so please dont refer me to those threads, im pretty sure i have investigated anything within reason for an explanation) Also, please no -webkit stuff. It needs to be solid across browsers. Hope that You guys can help an old time Greensock user out. Thx in advance /Simon
-
Hi, I saw a tutorial where the tutor animates elements from inside a mask definition to make his desired effects, so I thought that I could use that technique to make a similar animation for a different effect, but somehow it doesn't work for me. In my picture there is a circle that is defined inside the mask definition and it is meant to be animated but it doesn't move, however, if the circle is outside of the mask tags it can be animated. So the question is that is there a way to animate that circle defined inside the mask and if it is possible, what do I need to do to make it work?
-
Is it supported by GSAP the animation for venetian mask effect animation? I surf the net about making a venetian mask effect using GSAP. If you guys know how to make please post here thanks! The animation look like this but using GSAP! Reference of animation: https://codepen.io/dudleystorey/pen/HrFBx
-
Hi, I’m trying to figure out how to scale a circle within a SVG clipping mask, while keeping the mask static. Currently, the clipping path seems to scale along with the shape. Here's an example: http://codepen.io/ohem/pen/RaOZPa Based on my searches, it seems like the AttrPlugin could help, but I don’t seem to be able to implement it: http://codepen.io/ohem/pen/XdQabo Any suggestions as to how to implement this would be much appreciated.
-
Hi All, I am trying to animate a mask in a Flash HTML5 Canvas document using TweenLite. I am trying to animate a symbol that is in a mask layer. But when I try I get a JavaScript console error: TweenLite.min.js:12 Uncaught Cannot tween a null target. My other objects animate fine. I believe I have all the proper .js files loaded in the HTML (easelJS, tweenJS, movieclip, preloadJS) and the Tweenlite files (CSSPlugin, EasePack, Tweenlite). Here is the code I used that throws the error. TweenLite.to(this.leftYellowStripeMask, .5, {y:-9, ease:Quad.easeOut, delay:.3}); I'm guessing masks are not supported this way? Thanks,
