CSS Flip Animation enhancement
I have a project that is a phone for a game - especially GTA V(FiveM).
You can check it in the browser here - YFlip Phone
This is a clone of the Samsung Galaxy Z Flip 5, and it is made entirely by me.
I am struggling with the flip animation - The animation is working well, but there are some side effects that I cannot fix.
In your browser, you can click here on the hidden button to close the phone - close button
To expand it, click here - open button
Now you've seen what I am talking about(background blinks, home screen icons, too).
If you are interested in helping me with this, I would be happy to share more details.
20 Replies
can you make a sandbox, it's really hard to find out what is happening with the minified/compiled js
(only the phone component please)
It is complex, but I can provide part of the project in github to someone confident they can fix it. I cannot release it publicly. Let me know if you want.
Hi, I wonder if it is possible to achieve the same animation in a single container without splitting the phone into 2 parts. In that way, I am rendering all the content again, which causes a lot of issues and re-renders.
https://codepen.io/blazarow09/pen/NWozjWz
Test it here - Web
📱YFlip Phone
📱YFlip Phone
YFlip Phone - Is a FiveM Phone meant to boost your FiveM server's performance using our premium resource and enhance your roleplay.
not really. what you could do is creating a duplicate of the content on top of the regular content, clip it to the the top part and hide it by default, during the animation you make it visable. like so the content is already rendered, (it does mean extra data though). Or you use a static image that mimics the content
I can give you access to a boilerplate project if you want to try that out?
i don't know if I have enough time to dive into it
Or you use a static image that mimics the content - I tried to capture it in a canvas, but the content was not arranged correctly, and some elements moved a bit out of the way.
@MarkBootswhat about element.cloneNode() and lay it on top
What do you mean by lay it on top?
Instead of removing the static(full container) on Flip, I just set it to hidden, and now it works a bit better, but it still blinks on flip.
https://pastebin.com/Vrza9tR4
Pastebin
return ( <>
Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.
think you could manage it with some transition delays.
first make the front top and bottom layout visable, then hide the full container
This is how I am doing it at the moment, but I want to avoid rendering the phone's content on flip. Is there any other way to capture the phone content, like a picture, and pass it to the Top/Bottom layouts on flip?
can not see the delay happening. now it is done simultaniously (i think), that's why there is a blink
having the image, would be a lot nicer, i agree. Normaly doing it with canvas would be the way, but i'm not experienced enough with it to advise you on that
but it would also take some time to create/render that image, so a delay would still be necessary
Maybe you could check out https://frontend.horse/ discord server (link bottom of page). They do a lot of visualizations and stuff.
I will check their discord. So far, so good. I've made decent progress by removing the re-render issue.
Now I need to do a few things to reach the desired state.
No longer re-renders. I will adjust the timings to hide the screen on flip, but first I want to resolve the issue with the rounded borders.
@MarkBoots The parent has the border, but the children have padding. How can I apply the padding to the children without making it absolute?
think you'll need to increase the border-radius by the amount of padding
I've tried that, but It cuts it all when I do.
