Jump to content

Search the Community

Showing results for tags 'clip-path'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 11 results

  1. 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
  2. themepunch

    New Safari Bug

    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
  3. gntjnn

    SVG transform origin

    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
  4. 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!
  5. 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!
  6. 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
  7. 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!
  8. 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.
  9. 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!
  10. 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.
  11. 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.