Search the Community

Hey RamRavipudi. When editing your demo, please make sure to use the "fork" button on CodePen if you've already shared a demo to these forums. That way context is not lost in your previous post(s). The only way to do that would be to use clip-paths. But those have worse browser support and slightly worse performance, so keep that in mind when considering using it.

Hello, I'm created an svg logo that draws in, but I am struggling with some other code. When the page first loads the svg logo draws in. Then when mouse leaves the h1, it continues to stay draw in using a svg fill on my clip-path. If the user hovers back over it again, I would like the svg to clear the previous animation and start drawing it again from the beginning.

Hi, I'm trying to animate a clipping path circle, but only the radius. GSAP is animating all values of the style attribute. <div id="flap" style="clip-path: circle(10px at calc(100vw - 10rem) 10rem)"> </div> Grabación de pantalla 2022-12-22 a las 16.35.57.mov So, I want to animate just 10px value. How can I do it? Thanks!

I think for this, and the current browser support, I'd probably try to animate clip-path: Start with something like: clip-path: inset(40%); Then gsap.to('.el', { clipPath: 'inset(0%)' } https://codepen.io/elegantseagulls/pen/mdGymXP

CSS won't work because the clip-path is not rendered, so it's going to be in the top left corner. To move it you would need to mess with something like the clipPathUnits. Seems like too much of a hassle to mess with, so I would just change the attributes of what's being used for the path. In this case, a circle, so you can change its center x/y and radius. http://codepen.io/osublake/pen/gPYNVY?editors=101

I have to use a regular SVG element, my example is just an extraction, I have a lot of <g> elements that I will animate. I will also animate the wings of the bee, for example. The clip-path thing – I got this SVG from a designer. Is there a tool to improve this? I just know https://jakearchibald.github.io/svgomg/ and didn't manage to find this option there.

that was my first guess too @Rodrigo however, it seems that on further inspection it is using a triangular clip-path that animates to a full rectangle. Here is a screen shot @iuras I had a similar demo from my GreenSock courses so I made a few tweaks to the polygon coordinates. Maybe this will help https://codepen.io/snorkltv/pen/BaPLVmL

@mvaneijgen thank you for the recommendation, so put everything on 1 timeline and 1 scrollTrigger, I think that is definitely doable but a little bit scary, because it makes thing a little bit complicated, because we do have certain configuration different for each section , such as snap speed, and not to mention each section is now glued , we cannot move the sequence of section reveal without editting the animation script, we also cannot easily copy paste a section to other page ( by having each section their own timeline and scrolltrigger, we can easily just copy paste the HTML CSS and the timeline script for that section and put it on any other page easily ), etc So far here is our workflow, which is in our opinion is quite simple Step 1 : Our web designer will create the HTML + CSS design, we will check if all the content is displayed properly on various display, when everything is perfect, we can proceed with the animation Step 1 : Create Normal HTML + CSS (codepen.io) Step 2 : for each individual section that need to be animated ( for this example all will need to be animated, but perhaps on same page there will be some section which not need to be animated ) , we use the scrollTrigger with pin and pinspacing to animate everything Each section has their own Timeline and their own ScrollTrigger, everything so far is perfect, we love the workflow, we can individually change the scrub speed, snap speed, we can individually check each timeline with their markers, we also can copy this section's html css and timeline into any other page on the website , and everything will work perfectly , we love this capability Step 2 : Animate with Scroll Trigger With Pin + Pin Spacing (codepen.io) Step 3 : Now , all is perfect so far , we love everything , now we want to make them overlap, so that we can further control the reveal animation, we do understand to do this, a simple removal of Pin Spacing will solve the problem , and there are no problem if the only reveal animation we use is the Clip-Path from the bottom ( I could not attached the codepen i dont know why , check the codepen at the start of this thread ) https://codepen.io/m4g1c14n/pen/bGZboVg Problem : Thing become somewhat not good if we are revealing the next section using clip-path from the right side ( on this code pen example ) Pin Fixed (codepen.io) So my question remain, on the last Pen, can we do the clip-path reveal without having the last section pinned scrolling up ( because it has reach the end ), is there anyway to make the content continue pinning after it has been pinned ( I was thinking maybe using onLeave to fixed the last section, and then onLeaveBack to return them to the flow of document, is there any other idea? ) , if this is not possible, just tell me this is not possible so that I can workaround it some othe way ( maybe by forcing to reveal the animation using clip-path from the bottom for all section ) Again, I do understand your recommendation, which is to join everything into 1 timeline and control them using 1 scrollTrigger , we kind of not like the workflow , because using the individual timeline and scrolltrigger like what we have right now, the designer can move the section , and everything will work as perfectly without ever needing to touch the animation script ( for example section one, two, three, four , the designer change their mind and want to re-arrange into three,two,four,one , they can just move their HTML Code , without even needing to touch the CSS and or scripts )

Hi Diaco! I hadn't heard about the clip-path issues in Firefox, though that still doesn't explain why it renders that way in the CodePen preview :/ I'll try out the Attr or MorphSVG plugins and see if those help. Thanks!

It will likely be released some time this week or soon after. I don't see jitter on my Macbook Pro. However, you could improve the performance still. Check out this article for performance tips related to SVG. Since you're not animating any elements inside of the SVG I'd use a regular img element. Avoiding the use of clip-path might help as well.

Good news, @GreenSock took a peek at the clip-path issue and made some tweeks so the complex strings should work now. No need for generic object stuff. Give this a look: It loads a beta version of TweenMax with CSSPlugin: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js As Blake noted earlier its important that the values you are tweening from and to have the same number of numbers.

It looks to me like the bottom of the peel is being cropped. Maybe consider animating a clip-path for that layer, so you can better tune in the way it moves together?

Hello Everyone, Maybe someone also come here like I did searching for the same clip-path issue on Mozila. So its fixed in the latest versions, All you need to do is update your firefox mozila. and clip-path issue will be fixed.

OMG that helps alot! Thank you. To be honest, I'm having a hard time positioning clip-path since I'm still learning setting it up. Can you point me to what change did you make to make it centered Besides making the SVG into absolute position? Cause I want to make it resize to mobile as well. I saw that you added a new set of GSAP code, would it be possible to make the SVG resize with the viewport using GSAP?

Hi, I don't see anything related with clip-path in the codepen example you posted. Here are some threads where animating the clip-path property is explored and explained: Also in your codepen you are doing this: const text = new SplitType(".text", { types: "lines", lineClass: "lineChild"}); const mask = new SplitType(".text", { types: "lines", lineClass: "lineParent"}); Then you create a GSAP instance where you target the ".lineChild" selector, but there are no elements in the DOM with that class, since everything was replaced with the ".lineParent" class, so all the elements have that class. This seems to work, I don't know if it works in the way you intend: const text = new SplitType(".text", { types: "lines", lineClass: "lineParent"}); const mask = new SplitType(".lineParent", { types: "lines", lineClass: "lineChild"}); gsap.set(".lineChild", { y: "200%" }); let a = gsap.to(".lineChild", { y: "0%", duration: 0.5, stagger: 0.1, delay: 0.5, paused: true }); Finally the split text plugin you are using is a third party plugin and unfortunately we don't have the time resources to debug other tools, we have to focus our efforts in GSAP related questions. Let us know if you have other questions. Happy Tweening!

Yep - you'll need two versions of the logo and mask out one at a time depending on your background color. I'm not sure how you'd trigger it based on the color of the background. (unless a background color change is part of the animation?) I was thinking about triggers using the y offset of various sections. Give them classes of .blackLogo and .whiteLogo for example. You'd then trigger the mask animation based on those sections page position. You could calculate it yourself or use a 3rd party plugin like ScrollMagic. You could also use the newer Intersection Observer. You can clip and mask regular DOM text too. I'm not the right person to ask about it though. The few times I've tried it I get frustrated with cross browser support and end up going back to a SVG mask or clip-path. Hopefully that helps. Happy tweening.

Yep, a mask or clip-path would work well. You'd stack the before and after pictures and then reveal the top one with your mask/clip animation. I'd say give it a shot and see how far you can get with the project and then we'll help when you get stuck with any GSAP related problems. A minimal demo would be great too. Happy tweening.

Not sure what I am doing wrong here except for I took too much time off from using GSAP I am trying to do something really so simple here. Basically just want the headline and subhead to reveal from the center with the lines. No matter how I set thing up the parent div wants to animate from left to right. Am I just doing this the wrong way, not seeing something obvious or should I be using clip-paths? Thanks in advance!

Have a look at this post I made a while ago where I used the clip: rect(). That property is deprecated, but you can still use it. Clip-path is the newer and more robust way to do this kind of animation. https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path The old clip:rect() property will work if all you want is a simple horizontal wipe and it works in IE. You'll need to redo your HTML with img tags and the JavaScript to make the Animate button work. The concept is the same though.

Hi @candybanners It looks like Edge doesn't like the way you structured your clip path. If you add the rectangle directly to the clip-path without using <use> it seems to work just fine in all browsers. Hopefully that helps. Happy tweening.

I need to make this animation. I've tried different ways - via clip-path, but it doesn't work correctly. I wanted to try with pins, but the scroll trigger doesn't kick correctly and just replaces the video. Please help me. ezgif.com-gif-maker.mp4

Their repo is here - Why don't you take a look at how they're achieving it and then pop back if you have questions. https://github.com/Akohjesse/nav-clip-path-animation

I'm a little confused by the question too. Are you talking about that first animation where the picture overlaps the green background? If that's the case, I'd just use a clip-path or mask to reveal the image rather than a solid color overlay. If you put the image in a SVG and use a clip-path, you should get support across all browsers. Happy tweening.

Blake's answer had the best information for these needs. There was a fundamental misunderstanding on our part regarding when and how to invoke a new layer in the GPU, and more importantly, what not to do to layers in the GPU. Also we just assumed that tweening an SVG path would be best because css clip-path isn't well supported and we wanted that clip-reveal effect. But Blake's xPercent trick saved the day.

it works! I had something wrong with my codePen all along. We can create SVG objects with SNAP (which makes the clip-path work cross-browser) and then animate the mask and any other elements created with GSAP. http://codepen.io/celli/pen/gapLjN