Xenex122

yeah this is right thanks..take a rest sir hahaha..I thought it is background not backgroundImage cause that's what I same i do in clipPAth but thanks a lot.

So basically most of the time I called the animation with global css variable to animate but I find something it could be break down by just calling the name similarly to sir @PointC what did in this codepen with clipPath https://codepen.io/PointC/pen/GRQxWdZ so I did something similary like background gradients in my code in a text and the code format is like this in the end part of javascript. tl1.to(".text h1",{ // Here I want to animated the linear-gradient but it doesn't but I see some same define here at clip path so that's why I tried it but its covering the text. just comment out this background // "background": "linear-gradient(20deg, #FFFFFF 90%, #000000 10%, #FF792E 0%)", ease:"none", // stagger:1, }) when I put it in the scrollTrigger and you can see it also in my CSS which the code is like this. .text h1 { width: 100%; padding: 15px; background: linear-gradient(110.25deg, #FFFFFF 34.09%, #000000 46.66%, #FF792E 54.27%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } but if I do that the "-webkit-background-clip: text;", "-webkit-text-fill-color: transparent" is not working when I comment out the "background": "linear-gradient(20deg, #FFFFFF 90%, #000000 10%, #FF792E 0%)" Here's the codepen. https://codepen.io/myth-vince/pen/ZErZagL

Ok, so most of time I've searching a lot of information in forums but I wanna grasp it in into one with all the demos that gsap has because it has 21 Plugins right and others like timeline and tweens. I wonder where I could get all the demo's with information in that plugins without looking much in docs cause the docs is not quite clear sometime without any demo's or just a minor example..yeah just saying... but anyways thanks for a lot of help here including the staffs and moderator I learn a lot of animation but I wish I could be member soon so I don't have to struggle with some animations hahaha...(after I get a job maybe hehe?) Anyways. I've already seen alot in scrollTrigger demo's but I believe there's something more than just scrollTrigger plugin right? thanks.

Thanks for the reponse.

@PointC thanks. btw does it is DrawSVGPlugin a member plugin?

So previously I have a question wherein I want to make the circular path move across both direction in the circle in my first question before that same related to this wherein it only progress in one direction of circle but I want to progress the ring in both direction how can I achieve that ?? Here is the new update about it. https://codepen.io/myth-vince/pen/bGLONpY but I want it to progress ring in both direction not only in right direction..

EDIT NO DON"T DELETE THIS HAHHAHA I WAS WRONG

I was trying to restart my animation after it got click and do the same animation again...but it was restarting the animation..It was reversing the animation how could I fix this? I tried to create a tl.restart() to make the animation go back to the same position but it bouncing back. Anyway this is my codepen. https://codepen.io/myth-vince/pen/QWQobrY

Nah nevermind I already got my closest solution. gsap.registerPlugin(ScrollTrigger) const circle = document.querySelector('.maskingCircle') const tl = gsap.timeline({}) tl.to(circle,{ y:"-100%", left:"0%", width:"100%", height:"100%", ease:Expo.easeOut, borderRadius:"0%", duration:1, }) const button = document.querySelector('button') button.addEventListener("click",() => { tl.to(circle,{ y:"-200%", width:"200%", height:"200%", left:"-50%", ease:Expo.easeIn, borderRadius:"100%", duration:1, }) }) <div class="container"> <div class="maskingCircle"></div> <button type="button"> CLICK </button> </div> * { margin: 0;padding: 0; } body { position: relative; width: 100%; height: 100vh; /* background: orange;overflow: hidden; */ } .container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: orange;overflow: hidden; position: relative; } .maskingCircle { width: 200%; height: 200%; border-radius: 100%; background: #0002ff; position: absolute; top: 100%; left: -50%; } button { width: 300px; height: 100px; background: #ffbbbf; color: black; position: absolute; }

Ok, so I have a wordpress person web developer and I'm kinda curious how to do this in gsap..Just click the navmenu or maybe the in introduction there is like a curvature that will cover the introduction after the animation. https://ronielmedina.com/ Here check my codepen..It almost like the same but I'm still not satisfied to with because it is not doing the same thing as same as the shape curvature. https://codepen.io/myth-vince/pen/QWQobrY

@GreenSock sir you got obssesed at this hahaha..

Oh i have another question have about reversing it without animation?? like make all the animation duration to 0.

I want to reversed the animation but more faster than usual. const tl = gsap.timeline() And let say we .add() some animation on it when a duration of atleast 1 or 2 but when I click the button to reverse it will make the duration to 0.5 or 1/2 when I'm reversing the animation. Anyone can help me through this?

oh nevemind I got the solution gsap.to(circle,{ duration:10, // strokeDasharray:`${0}% ${0}%`, strokeDashoffset:"0", ease:"power2.out" })

So in the publicity of frontend I think I always encounter this one but somethings wrong with my animation in this progress ring. I don't to see those kinda small white spaces between the progress ring can anyone help me through this? I'm almost close to it but it seems kinda wrong a little.