Search the Community
Showing results for tags 'clip-path'.
Found 19 results
-
I was trying to achieve the clip-path stagger animation using GSAP similar to this website: https://alphatango.com/work if you hover over the below image we can easily see how the clip-path is changing. Interestingly, I achieved very close to it, but not exactly what's there is the alphatango site. Can anyone have an idea of how we go about it? Attached the codepen
-
Does anyone know if I'm implementing this incorrectly or if not, a workaround for this? Sandbox: https://codepen.io/bradwoods/pen/QWPgjMY
-
I've seen sandboxes of GSAP animating polygon but none with calc using percent + px units. Does anyone know if I'm implementing this incorrectly or if not, a workaround for this? Sandbox: https://codepen.io/bradwoods/pen/BaEZorO?editors=0110 -
The clip-path animation in the mentioned code pen is not working. Can someone please point out what am I doing wrong? The other one with ellipse works just fine - https://codepen.io/sayaliga15/pen/abmpMdY
-
Hi, im working on this zoom in transition using clipPath and ScrolTrigger but im having issues with properly transitioning from one path to another. I am not sure if the issue lies in my gsap animation code, or if I prepped my svgs incorrectly. Here is a link to a demo of it https://codepen.io/akalex-x/pen/mdvOLxX As you can see it starts as a small flag crop that then grows full screen, and then I wanted to change it into a simple rectangle shape but when I try to do that it instead jumps to an awkward crop. I made my SVGs in figma and made sure they are the same size and have the same about of points. I then exported the SVGs and used https://yoksel.github.io/relative-clip-path/ to change the absolute paths to relative. Any help here will be super appreciated, thanks!
-
Just starting out. Trying to animate clip-path on scroll. It's working but the left side doesn't transition out.. It just jumps to end, the the right side plays fine. Can anyone see what Im missing??? thanks T
-
Hello, I'm trying to have animate a clip path on a div. The div contains an image or a video. The clip path is in a svg, and i use css to apply the clip path, but the animation is laggy. I have tried to insert an image into to the svg the animations i smooth. When i try to use foreignObject to put the video into the svg. The animations is smooth, but there is somekind border on the foreignObject. Currently im stocked how to proceed, what should i search for, how do i debug? In my codepen the first two examples is clippath on a div with some element inside. The next two is the element inside the svg.
-
Hi everyone, The issue here seems to be with the shifting of the background images on slide in / out. In the functions slideIn and slideOut I've commented out the lines of code that shift the background images. With this code removed everything works fine on all browsers. Un-commenting the code adds the image shifting and on Chrome and Firefox, everything works fine with the shifting added. On Safari however, it appears to kill the other tweens that scale the SVG clipping path and do the SplitText animation. Have a look and see what you think. I'm assuming I've made a mistake but then I'd also assume I'd have an issue in other browsers. (Feel free to critique my code as well )
-
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!
-
Hi all. Please, help me. Why does circle clip path on image working wrong in my pen in firefox browser? My animation begin from circle(0% at 0% 50%) to circle(150% at 0% 50%), but in firefox it has value clip-path: inset(150px at 0% 50%). Why it happened? Thank you for answers
-
Hi Folks, When GreenSock write matrix3d on CSS Transform based on force3D / Perspective / TransformOrigin the clip-path css attribute animation just break in the Latest Safari (12.1 (14607.1.40.1.4)). See our Example above in SAFARI Latest Version, or on any iOS latest version !! . Click on Working and Not Working version to see the Effect. The only Different between those functions are the "force3d:true" setting ! Hope you have a good idea for this ? Thank you, Krisztian from ThemePunch
-
Hi, i'm trying to recreate the following hover effect with GSAP: Right now i'm trying to figure out how i set the transform origin correctly. The element that I want to tween is initially translated so the animation starts at the wrong position. Hope someone can explain me how to fix this. Here is my Pen: Thanks
-
Hello! This is my (obviously) my first post to the forums. I haven't worked with greensock since the flash days (yeah it's been a while). I have attached my codepen - it doesn't do anything, but I was hoping to illustrate what I'm trying to do with it. The lighter stroke I want to slowly animate from left to right. Back in the flash days, I would simply create a little mask to only reveal a small section of the stroke and then animate the mask to make it look like the line was moving across a path. I think what I am looking for is something along the lines of this post: I'm not looking for someone to do this, I'm just not sure where to even start. Thank you for any suggestions!
-
Hi gsap people, So I'm a bit at a loss. I did a ton of research to find the best "cross compatible" way to reveal a background image on scroll. Basically it works as intended on chrome in the codepen, a more clear example is above the fold to scroll on https://bell.works/work but you can for sure see it in the codepen. Just some notes - TLDR maybe using svg injector to load the svg circles except for the clippath SVG mask which is inline i'm using objectBoundingBox for the clipPathUnits, otherwise the size of the circle on load less easily controlled, and then I had to tween the attributes of the SVG mask ellipse to get it sized right so it wouldn't be an oval based on browser width, e.g. var relWidth = $("#site-header-area").width(); var relHeight = $("#site-header-area").height(); var $rX = relHeight / relWidth * 0.5; TweenMax.set("#circle-mask", { attr: {cx:0.5, cy:0.6, ry: 0.5 * 0.75 , rx: $rX * 0.75 }, transformOrigin:"center center"}); for the live url https://bell.works/work the mask works like the codepen and intended, but doesn't tween on scroll, BUT if you go to the bottom of the page and back up, it tweens it all open, and then doesn't close it back up like on chrome - does that make sense? it's like there's a big delay in any calculations but it is working, just not bound to scroll I've read a series of posts about similar issues with solutions that don't really work or help: https://stackoverflow.com/questions/44722751/svg-clip-path-not-working-on-safari this bug https://bugs.webkit.org/show_bug.cgi?id=126207 removing -webkit-clip-path property, which worked for some people on safari 11 for some reason I feel like I went down the rabbit hole on this one. Is there something obvious I'm missing? Is there a better way to do this purely with gsap? Should I just quit altogether and make an SVG that looks like a mask with a hole in the middle and then tween the attributes or scale the whole thing on scroll? Any help would be greatly appreciated! -
I got two issues when I want to use css "clip-path" and its attribute "inset". The first one is I can't make it work as animation, I want it to move to Clip-path:inset(50% 0px 0px) slowly, but it doesn't work. The second one is I can't use something like Clip-path:inset (-50% 0px 0px),I want to use minus parameter, but still not working How can I make these work with GSAP? Thanks
-
I am trying to create floating circular image mask using svg clip-path. It works fine in Firefox and Chrome but Safari somehow cuts off the clipped image. Resizing the browser seems to (temporarily) solve the issue. I have no clue what is going on. Any help would be greatly appreciated!
-
I am working on a reveal effect to show a frame over another one using clip-path either an inline SVG with <clipPath> or with a CSS shape and basically animating the reveal. On the Codepen: * Left side uses SVG clipPath * Right side uses CSS shape Basically, on Desktop Chrome v56, I have great performance and it works as it should for both strategies. On Desktop Firefox, I can only get it to work with SVG clipPath. However, on the first rendering, the animation is jerky. On subsequent renderings, it is smooth. On Desktop Safari, I can only get it to work with a CSS shape. Safari can't seem to be able to animate the attributes of the SVG shape inside the <clipPath> component. If I resize the window, the final SVG clipPath is rendered, so it seems that Safari cannot render the graphics without being resized. For IE / Edge, I haven't tested, but I likely won't be able to support those browsers. Trying to see if others had suggestions on how to improve the performance of this reveal effect on Firefox and/or Safari.
-
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.
-
I am animating a photo within an SVG clip-path, what I have below works in IE11, Chrome and Desktop Safari, but doesn't work in FF and iOS Safari http://codepen.io/mattparkerseverin/pen/OMYEbX I've been researching this issue here on the forums, and elsewhere, but I can't seem to implement the fix suggested here - http://greensock.com/forums/topic/12062-masking-with-clippath-and-svg/ I understand the the Attr plugin could work, but I'm not quite sure how to utilize it.
