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?