[Animate SVG path attributes]

@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;

 

[Sliders direction from right to left if its right click and left to right if its left click.]

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 :>> ..

See the Pen bGvpmza by myth-vince (@myth-vince) on CodePen

[How to animated the background-linear-gradient without using css variables in timelines.]

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.

[How to animated the background-linear-gradient without using css variables in timelines.]

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  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.  

See the Pen ZErZagL by myth-vince (@myth-vince) on CodePen

See the Pen GRQxWdZ by PointC (@PointC) on CodePen

[Demo's across the gsap plugins and others.]

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.

[How to make the SVG Circular path animation make the two dashoffset move?]

Thanks for the reponse.

[How to make the SVG Circular path animation make the two dashoffset move?]

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

[How to make the SVG Circular path animation make the two dashoffset move?]

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. 

but I want it to progress ring in both direction not only in right direction..

See the Pen bGLONpY by myth-vince (@myth-vince) on CodePen

[How to reset the animation after the animation got click.]

EDIT NO DON"T DELETE THIS HAHHAHA I WAS WRONG

[How to reset the animation after the animation got click.]

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. 
 

See the Pen QWQobrY by myth-vince (@myth-vince) on CodePen

[How to make like a curvature dashing in introduction]

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;
        }

 

[How to make like a curvature dashing in introduction]

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.

See the Pen QWQobrY by myth-vince (@myth-vince) on CodePen

[Is gsap with any methods that can change div size according to mousemove?]

@GreenSock sir  you got obssesed at this hahaha..

 

[How to reverse the animation at twice speed.]

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

[How to reverse the animation at twice speed.]

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?

See the Pen gOvZmMg by myth-vince (@myth-vince) on CodePen

[Progress ring in gsap]

oh nevemind I got the solution 
 

        gsap.to(circle,{
            duration:10,
            // strokeDasharray:`${0}% ${0}%`,
            strokeDashoffset:"0",
            ease:"power2.out"
        })

 

[Progress ring in gsap]

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.

See the Pen bGLONpY by myth-vince (@myth-vince) on CodePen

[Why my navbar is stopping in the middle in react but not in normal javascript?]

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,
            })
        })

 

[Why my navbar is stopping in the middle in react but not in normal javascript?]

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

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?

See the Pen ZErmgWm by myth-vince (@myth-vince) on CodePen

[Change title scrollDown to scrollUp if the pin scrollTrigger reach the lowest point of height container.]

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

[How to check if the scrollTriggers is already end or start (console.log("start" or "end"))?]

@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 

See the Pen BaYGaoK by myth-vince (@myth-vince) on CodePen

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.

[How to check if the scrollTriggers is already end or start (console.log("start" or "end"))?]

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.

[Change title scrollDown to scrollUp if the pin scrollTrigger reach the lowest point of height container.]

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.

See the Pen BaYGaoK by myth-vince (@myth-vince) on CodePen

[Is it possible to reverse timeline tweens all at once?]

5 minutes ago, synthwavenomad said:

@Xenex122 Thanks for your quick responses but this still isn't unfortunately what I am after as I do want them to animate, just simultaneously.

And the second option isn't ideal either as it may get messy when playing around with the timeline, I am sure there must be a way to reverse all tweens at the same time on a timeline.

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?

[Is it possible to reverse timeline tweens all at once?]

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