Jump to content
Search Community

How to animate this masking effect in more perfomance way?

ashura test
Moderator Tag

Recommended Posts

Basically I have this image. First

image.thumb.png.560c2819ebf132db000ffd4e5de893ae.png

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

Link to comment
Share on other sites

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! 🔥

  • Like 3
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...