blazarow
KPCKevin Powell - Community
•Created by blazarow on 11/18/2023 in #front-end
CSS Flip Animation enhancement
23 replies
KPCKevin Powell - Community
•Created by blazarow on 11/18/2023 in #front-end
CSS Flip Animation enhancement
@MarkBoots The parent has the border, but the children have padding. How can I apply the padding to the children without making it absolute?
23 replies
KPCKevin Powell - Community
•Created by blazarow on 11/18/2023 in #front-end
CSS Flip Animation enhancement
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.
23 replies
KPCKevin Powell - Community
•Created by blazarow on 11/18/2023 in #front-end
CSS Flip Animation enhancement
23 replies
KPCKevin Powell - Community
•Created by blazarow on 11/18/2023 in #front-end
CSS Flip Animation enhancement
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.
23 replies
KPCKevin Powell - Community
•Created by blazarow on 11/18/2023 in #front-end
CSS Flip Animation enhancement
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?
23 replies
KPCKevin Powell - Community
•Created by blazarow on 11/18/2023 in #front-end
CSS Flip Animation enhancement
23 replies
KPCKevin Powell - Community
•Created by blazarow on 11/18/2023 in #front-end
CSS Flip Animation enhancement
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
23 replies
KPCKevin Powell - Community
•Created by blazarow on 11/18/2023 in #front-end
CSS Flip Animation enhancement
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.
@MarkBoots23 replies
KPCKevin Powell - Community
•Created by blazarow on 11/18/2023 in #front-end
CSS Flip Animation enhancement
I can give you access to a boilerplate project if you want to try that out?
23 replies
KPCKevin Powell - Community
•Created by blazarow on 11/18/2023 in #front-end
CSS Flip Animation enhancement
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
23 replies
KPCKevin Powell - Community
•Created by blazarow on 11/18/2023 in #front-end
CSS Flip Animation enhancement
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.
23 replies