Jump to content
Search Community

keyframe smooth closing transition not working properly.

ashura test
Moderator Tag

Recommended Posts

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]);
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...