keyframe smooth closing transition not working properly.

[ashura 1 Likes (Newbie)]

I'm tryna use a clipPath in transitioning closing the animation but apparently its not working as expected. Can anyone tell me how can I make it smoother? Like I don't wanna wait for the other animation to be done before animating the another one. Also there is a bug here its not animating properly. It's like closing just so  sudden but it in my browser it is moving well. Downward, is this a bug or what? 

Here is the link source 

https://codesandbox.io/s/epic-liskov-1s9wci?file=/src/App.js
 

And this is my problem 
 

  useEffect(() => {
    // // welcome screen
    function pathFunc(idx) {
      return `polygon(
              0% ${idx >= 4 ? "100%" : "0%"}, 
              0% 100%, 
              20.0% 100%, 
              40.0% 100%, 
              60% 100%, 
              80% 100%, 
              100% 100%, 
              100% ${idx >= 0 ? "100%" : "0%"}, 
              80% ${idx >= 0 ? "100%" : "0%"}, 
              80.0% ${idx >= 1 ? "100%" : "0%"}, 
              60.0% ${idx >= 1 ? "100%" : "0%"}, 
              60.0% ${idx >= 2 ? "100%" : "0%"}, 
              40.0% ${idx >= 2 ? "100%" : "0%"}, 
              40.0% ${idx >= 3 ? "100%" : "0%"}, 
              20.0% ${idx >= 3 ? "100%" : "0%"}, 
              20.0% ${idx >= 4 ? "100%" : "0%"}  
          )`;
    }

    if (anim) {
      tl.play();
    }

    tl.to(".box", {
      duration: 3,
      keyframes: [
        {
          clipPath: pathFunc(0)
        },
        {
          clipPath: pathFunc(1)
        },
        {
          clipPath: pathFunc(2)
        },
        {
          clipPath: pathFunc(3)
        },
        {
          clipPath: pathFunc(4)
        }
      ],
      ease: "power2.inOut"
    });
  }, [anim]);

[ashura 1 Likes (Newbie)]

Addition this animation is supposed to be similar to these.  
 

 

[Cassie 5,406 Likes (Superhero)]

Their repo is here - Why don't you take a look at how they're achieving it and then pop back if you have questions.

https://github.com/Akohjesse/nav-clip-path-animation