Xenex122

@Shrug ¯\_(ツ)_/¯ care to explain how can I do that in the figma when editing the path? It is annoying because I tried to make a three parts of the animation of it for svg. Let say... we have initial of shape rectangle like 1000x20 -> then curved based on your demo -> 1000x1000 something like that. I hope you get what I mean. Here is the code sample in reactjs. And I couldn't get it when I tried to make my own animation in svg path. import { useEffect } from 'react'; import './App.css'; import { gsap } from 'gsap'; function App() { useEffect(() => { let $path = document.querySelector(".path"), $logo = document.querySelector(".logo"), repeat = false, tl = gsap.timeline(repeat ? { paused: true } : {repeat: 1, repeatDelay: 1}), animate = () => { const start = "M0 1.48294C0 1.48294 291.279 4.77898 502.888 1.48666C717.742 -1.85616 1000 1.48294 1000 1.48294V1000H500H0L0 1.48294Z" // "M 0 100 V 50 Q 50 0 100 50 V 100 z"; const end = "M0 410.5C0 410.5 291.279 3.75291 502.888 0.460595C717.742 -2.88222 1000 410.5 1000 410.5V998.974H500H0L0 410.5Z" // "M 0 100 V 0 Q 50 0 100 0 V 100 z"; tl .to($path, { duration: 2.0,attr: { d: start }, ease: "power2.in"}) .to($path, { duration: 1.6, attr: { d: end }, ease: "power2.out"}) .from($logo, { duration: 2.0, y: 75}, '-=.8') .play(0); }; animate(); },[]) return ( <div className="App"> <div className='wrapper'> <svg className="transition" fill='#1f1a1a' width="1000" height="1000" viewBox="0 0 1000 1000" preserveAspectRatio="none"> <path class="path" stroke="#000" strokeWidth="5px" dur="10s" vector-effect="non-scaling-stroke" // d="M 0 100 V 100 Q 50 100 100 100 V 100 z" d="M0 0.124567C0 0.124567 291.279 0.401434 502.888 0.124879C717.742 -0.155917 1000 0.124567 1000 0.124567 V 84 H 500 H 0 L0 0.124567 Z" /> <animateMotion repeatCount="indefinite"> <mpath xlinkHref="#path" /> </animateMotion> </svg> <svg className="logo" viewBox="0 0 18.31 18.31"> <path fill="#ffffff" d="M7.47,17.61l-6.78-6.78c-0.92-0.92-0.92-2.44,0-3.36l6.78-6.78c0.92-0.92,2.44-0.92,3.36,0l6.78,6.78c0.92,0.92,0.92,2.44,0,3.36l-6.78,6.78C9.91,18.54,8.4,18.54,7.47,17.61z M6.94,11.31c2.09,2.09,3.15,2.34,4.5,0.98c0.83-0.83,1.65-1.75,2.23-2.79l-0.56-0.56c-0.64,0.86-1.49,1.69-2.41,2.61c-0.78,0.78-1.33,0.7-2.58-0.55l2.25-2.25c0.96-0.96,0.92-1.83,0.15-2.6C8.75,4.37,7.84,5.04,6.59,6.29C4.94,7.94,4.56,8.93,6.94,11.31z M7.38,10.26C5.75,8.64,6.2,8.16,7.34,7.03c1.09-1.09,1.38-1.2,2.43-0.14c0.33,0.33,0.3,0.68-0.14,1.13L7.38,10.26z"/> </svg> </div> </div> ); } export default App;

Long time no see, GSAP Community but I'm hereby to ask another question cause I'm kinda confused how I will supposed 'direction' my text if its click on the right or left. As you see in this code function firstTextFunctionsSlideIn(array, direction) { const firstGsap = gsap.utils.toArray(array); firstGsap.forEach((elem, i) => { gsap.fromTo( elem.children[0], { x: direction > 0 ? 100 : -100 }, { x: 0, duration: firstGsap.length / (firstGsap.length - i * (0.05 * firstGsap.length)), ease: "power2.inOut" } ); }); } function firstTextFunctionsSlideOut(array, direction) { const firstGsap = gsap.utils.toArray(array); firstGsap.forEach((elem, i) => { gsap.to(elem.children[0], { x: direction > 0 ? -100 : 100, duration: firstGsap.length / (firstGsap.length - i * (0.05 * firstGsap.length)), ease: "power2.inOut" }); }); } wherein in the functionSlideIn() is not getting an issue only if I click the right click button but if I click the left its like its countering the functionSlideOut().. Note that If keep clicking the functionSlideIn() nothings happen but when I click the left 'PREV' it will counter flow I'm just slightest a bit confused of how I will make the direction when the text is out or in ...yeah that's right my only problem here is X. but a little bit confused. If anyone can help me it is a big thanks :>> ..

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.

Oh I'm trying to add it with the other animation..does it not allow to do that? You can see it here allHides.forEach((elem,i) => { elem.children[0].innerHTML = elem.children[0].textContent.replace(/\S/g, "<span class='letter'>$&</span>"); // console.log(elem.children[0].children) navAnim.to(elem.children[0].children,{ y:'0', ease:"circ.out", stagger:0.02, duration:0.02, }) })

I don't know what kind of bugs happening here but I don't see any difference that make the navbar stops and not. So basically the problem is that in a react my sidebar closing is giving me a bug and stopping while it is still not complete. It supposed to be in height: 0vh and 100vh when reversing the animation through my menu button but it is not working properly.. In a normal javascipt it is working heres the codepen https://codepen.io/myth-vince/pen/ZErmgWm You can see the difference already once to try to click the menu and heres for the reactjs https://codesandbox.io/s/sad-leftpad-8cb6lv?file=/src/App.js const tl = gsap.timeline() const navAnim = tl.to(navbar,{ height:"100vh", duration:2, ease:"power2.easeOut", }) navAnim.reversed(true) function s(e) { navAnim.reversed(!navAnim.reversed()) } open.addEventListener("mouseup",s) close.addEventListener("mousedown",s) open.addEventListener("click",() => { close.style.opacity = "0"; open.style.opacity = "1"; open.style.zIndex = "0" }) close.addEventListener("click",() => { open.style.opacity = "0"; close.style.opacity = "1"; open.style.zIndex = "1" }) You can see it here in there lines at the useEffect and the normal javascript..where the reactjs stops without making the animation done from 100vh to 0vh Anyone can help me through this?

yes can you delete it hahahhaha..I was just trying to redefine it more clearly.

@akapowl I've created this new one but it doesn't work...I just based on your codes..but it doesn't make sense to me check this https://codepen.io/myth-vince/pen/BaYGaoK EDIT when I scroll it up until it reach the starter it doesnt change into scrollDown?? care to explain? but the code you give is working just only the starting point.

Basically what I'm trying to say is that. If the scrollTrigger hits the end of the animation it supposed to console.log("end") if its on the end trigger and if going back then it will be console.log("start") if only it hits the start trigger function CallBack(e) { console.log(e) } end: () => if(hasEnd) { Callback("End") } else if (hasStart) {Callback("start")} I don't have a codepen to make sample to it but it somehow related to my recently problem that I posted here. but I think my question is here is far so I made a repost and try to simplify it.

So my problem is what basically the title ask.. I want to change the ScrollDown into ScrollUp when the ".scroller" reach its pin when scrolling down into the next section it must gonna change to ScrollUp and if it also reaches the reach the pin in scrolling up its gonna change to ScrollDown. Can anyone help me here? Thanks. Anyway here's the codepen sample.

I don't understand ?? You are asking reversing it simultaneously which basically what the animation doing. Perhaps you are expecting a different function of codes? Have you tried the codes first?

And if you want to animated it demoTL.to("div", { x: 0 }); but in reversed do this thing. This one looks more cleaner than the first one I posted. Additional just make sure this "div" has a parent just to avoid errors in animation. Hope you like it goodnyt @synthwavenomad