How to animate this masking effect in more perfomance way?

[ashura 1 Likes (Newbie)]

Basically I have this image. First

What happens here is that when I click it. It gonna pop up the white bars and gonna remove those layers from right to left and left to right and then there is something gonna pop up in the middle of it.

I'm using react for it. But yeah it seems possible but the technique here I'm imagine is way rich and not good for performance. Cause I'm gonna have a double copy of THE RISING PHASE 1. and then use a clip path.

Here is the code for opening first but I don't have an idea for the closing which is removing the layers using clip path or maybe you have an idea??. 

https://codesandbox.io/s/agitated-rosalind-bie401?file=/src/themeMasking.scss

 

If anyone can help I would be thankful a lot please thank you :>> 

[mvaneijgen 1,704 Likes (Superhero)]

I wouldn't think having two copies of the same elements (which are just some text blocks) would impact performance much. What I do see is that you're using the following properties which do impact performance: bottom, top, translateY (All these can be replaced by y: or yPercent) and animating width is also something I personally like to stay away from. 

 

What I personally would do is take a step back from your whole project and just focus on the animation, remove React, just use simple HTML, CSS, JS (on a place like codepen) and just keep forking your animation until you've got something you're happy with. I would take it even further and grab pen and paper and draw out a story board with notes what elements/properties you're going to need. 

 

But the copy of the element with to clip-path's seems like a great start. The white lines are just simple divs that move at the same rate as the clip-path. In the simple demo, remove the click handle, just focus on the animation and maybe use GSDevTools for quick debugging, if you're stuck, just post back here! Looks like a cool animation btw! 🔥