tailbreezy

Indeed looks that way. Have you tried setting: ctx.fill("nonzero"); It seems to do what you want.

Thanks, Jack and PointC. I mostly wanted to know how this could be done in gsap, since it does a lot of paths manipulation and this method had potential to do exactly that. In the meantime I was looking at this npm utility. If anyone is interested in the same. It seems to be a little more involved in handling most of svg path commands. It is nothing too complicated, just some regEx and array rearranging, but handles some edge cases. https://github.com/Pomax/svg-path-reverse/blob/gh-pages/reverse.js

Thanks. Your answer indirectly answered my question. (there isn't such a method) Which is all I have asked in the first place. Not really sure why we have to turn it into a game of Q&A.

So, there isn't a method? I know of at least a couple of ways to hack what I want to achieve, but thought this method would be a lot easier. If this was in fact what it did. from d="M 25,50 C 25,100 150,100 150,50" to d="M 150,50 C 150,100 25,100 25,50 The paths could be more complex.

@ZachSaucierThanks for chiming in. 100% 0% is not what I am looking for. Also Illustrator is a none issue, I was just pointing out the effect. I want to actually reverse the direction of the path. Is this what this method did in the past?

Hello, I am searching for a way to reverse the direction of a SVG stroke. (exactly like in Illustrator or similar software). It seems there was a method pathDataToBezier, on which you could call .reverse(). var bezier = MorphSVGPlugin.pathDataToBezier($('.big-path')[0]).reverse(); This was suggest some time ago by @PointC but @ZachSaucier some time after suggested that this is no longer possible since gsap 3. Is there still such a method in some of the plugins, it seems everything bezier/rawPath related moved to MotionPath plugin.

Not necessarily. You can create new Image() that is not part of the DOM and attach onload and src on it.

You can check when image is loaded and then simply add it as a background with HTMLelem.style.backgroundImage or simply toggle a class on load.

Hello kisha, I haven't used an event listener on a single image, but I do believe you can check by attaching the eventListener on the image itself. img.addEventListener( "load", () => { /* code */ })

Hello Aleksei, This will probably solves your issue. if (closed) { gsap.to(main, { duration: 1, height: (_,t) => { let prevHeight = gsap.getProperty(t,'height') t.style.height = 'auto' let h = gsap.getProperty(t,'height') t.style.height = prevHeight + 'px' return h + 'px' }, paddingBottom: 20 });

Hello trych, Have you considered attaching the tween on the element itself. document.querySelector('.target") target.animation = gsap.timeline() animation is just a prop name, you can name it anything.

Hello, Interesting, Power4 should be accessible. Have you tried to use the more conventional way ease: "power4"?

If it works on desktop and you can see the setting applied on mobile. It could be a media query issue.

Hello jonias, It is called position paramenter. You can read more about it here.

There are many topics that have such content, but I would also appreciate a pinned section with works/experiments.