Open Sesame! My 1st Trial to open a Glassmorph & Eclipse Door

L.M · October 31, 2021, 10:24am

Hi Thks to @Himaladin especially, looks like I’m on the right track to open that door.
It’s still not working at 100 %, as if the requested tab cannot come front. So you’re seing my lab app with its mess. But, nevertheless, I’ve never been so close to open a door. If I may express it “wordsmithly and wordsmoothly” (I hope my non-native English attempt to play-on-words does not harm your eyes).

I’d like to suggest a “spirit of” a glassmorph sliding door that dissolves in the dark.
Sth very ethereal & surreal.

You can notice that there’s an issue to display to closing door over the black background, the replaced title bar & bottom menu bar. z-index: doesn’t change anything, they still display above the door.

I need to test it thoroughly before integrating it to my production app (well, still a prototype for months anyway).

Thks for watching and commenting. Best Practices welcome!

Darren_Murphy · October 31, 2021, 10:44am

Very nice

L.M · October 31, 2021, 10:59am

Thks, Darren I’m trying to optimize UX with 1 single click to open (and decide when to) that door and navigate to next tab. While letting user time to read the pitch.
The slide can be adapted like transitions (as in presentation slides) to simulate automatic stairs up / down, curtains, etc.
Should be ok by the end of the year.

Himaladin · October 31, 2021, 1:28pm

Thank you for your appreciation @L.M. As I said, I learn by trial and error .
If I’m not mistaken by what you mean by removing the bottom tab bar and top bar, could you try this CSS draft in my colors first? I’m having a little trouble seeing your color theme with my base app. For other property settings, you will need adjustments to your application design. Don’t be quick to despair. Here we are all learning too .

<pre><div><style>
[data-test="glide-app-bar"] :nth-child( 1 ) {
    backdrop-filter: opacity(0);
    background: transparent; 
}
[id="tabBar"] {
    backdrop-filter: opacity(0);
    background: transparent; 
}
</pre></div></style>

<div style ="position: fixed;
animation: slidedissolve 10s;
animation-fill-mode: forwards;
top: 0px; 
width: 100%;
height: 100%;
left: 0%;
opacity: 100;
margin-left: 0px;
background-color: rgba(191, 41, 255, 0.62); 
backdrop-filter: blur(5px);
border-radius: 16px;
padding-top: 0%;
padding-left: 0%;
padding-right: 0%;
box-shadow: 0 4px 30px #bf29ff;
rgba(0, 0, 0, 0.1);
text-align: center;
z-index:10 !important;
border: 1px solid rgba(191, 41, 255, 1);"
</div>

<pre><span><style>
@keyframes slidedissolve {
  from {left: 0px; opacity: 1;}
  to {left: -100%; opacity: 0.1;
}

L.M · October 31, 2021, 1:51pm

Thks! No, I’m not the kind to dispair. Tenacity is my second name
So is Sleeping Dragon
But I must prioritize.
Frustrating, but necessary.

Every little extra that brings magic takes time in hours. Even with help.
As there’s no way to copy-paste everything from a test app to the production app (still prototype).
And I’d like to understand things rationally to gain independence.

L.M · October 31, 2021, 7:14pm

OK, you’re awesome. It’s working.
I see you put z-index:10
! Wow! How did you find out?
I’ve noticed also that the order of tabs can influence / cause the app to “lose its mind” as troubled refreshing new/old names even really different. That’s a relief.

There’s just a little detail: it’s hiding my top left logo, as shown in the screencaps.

I saw you other post with your crash. Be careful to backup your tabs & screens. Or you may have to delete the faulty tab if you cannot edit the CSS via Chrome Developer’s Tool (I have Edge, can’t find anywhere how to edit and correct the CSS to recover the tab)

Himaladin · November 1, 2021, 3:53am

Sometimes we don’t know the level of the z-index of an application design. I only pegged at level zero to the top (+) or bottom (-) layer. At first, I tried at high levels to check whether the CSS script was correct/false, so I knew that a script was not correct. As far as I know, the hardest is if it is at the parent/root level and the target name.
You probably already know there’s a trick here, or I’d better share it again:
CSS Tricks.
Thanks to @ThinhDinh and @Lucas_Pires

Himaladin · November 1, 2021, 6:25am

The way I look for errors within Devtool of Chrome/Edge is to hide or show them. I hope this helps.

L.M · November 6, 2021, 10:58am

Hi, can you pls help with this one more time? I’m so close to the final result.
Here’s the pb in video. As you can see, the code corrected by @Himaladin works with the glassmorph door covering the whole place as I wish (I adjusted everything to fit with the 1st Eclipse door). Except that it hides the Sharon Logo on top left.
I tried changing nav-bar and glide-app-bar to show you what happens. Can’t figure out why if I show the logo the glassmorph does not cover the top.
Thks. And sorry to bother you one more time. But it’s so close

An idea, @ThinhDinh ?

Himaladin · November 6, 2021, 12:13pm

Hi @L.M
Are you willing to try this?
Replace the URL with your Sharon’s URL, and slightly adjust the position. And delete the previous css.

<pre><div><style>
[data-test="glide-app-bar"] :nth-child( 1 ) {
    backdrop-filter: opacity(0);
    background: transparent;   
    background-size: 20px 20px;
    background-repeat: no-repeat; 
    background-position: bottom 10px left 30px;    
    background-image: URL("URL");
}

[id="tabBar"] {
    backdrop-filter: opacity(0);
    background: transparent; 
}
</pre></div></style>

<div style ="position: fixed;
animation: slidedissolve 10s;
animation-fill-mode: forwards;
top: 0px; 
width: 100%;
height: 100%;
left: 0%;
opacity: 100;
margin-left: 0px;
background-color: rgba(191, 41, 255, 0.62); 
backdrop-filter: blur(5px);
border-radius: 16px;
padding-top: 0%;
padding-left: 0%;
padding-right: 0%;
box-shadow: 0 4px 30px #bf29ff;
rgba(0, 0, 0, 0.1);
text-align: center;
z-index:10 !important;
border: 1px solid rgba(191, 41, 255, 1);"
</div>

<pre><span><style>
@keyframes slidedissolve {
  from {left: 0px; opacity: 1;}
  to {left: -100%; opacity: 0.1;
}
</pre></span></style>

L.M · November 6, 2021, 12:33pm

Thks. But sorry, no luck: Sharon is still hidden and this time, even the bottom icon menu tab as well… So it’s worse actually.

Himaladin · November 6, 2021, 12:50pm

I didn’t change the bottom icon (tabBar). On mine it still works fine.
Can you copy-paste my entire script, and just replace “URL” with yours before you make any other settings?
And remove all your previous css. Just to check for possible collisions of other scripts especially scripts from your logo, and make sure there are no typos.

Himaladin · November 6, 2021, 1:08pm

If you don’t want your door to cover the bottom icon, you can remove this section:

[id=“tabBar”] {
backdrop-filter: opacity(0);
background: transparent;
}

Nb: Nicely new profile picture

L.M · November 6, 2021, 1:39pm

You were right. I removed everything and add 1 component at a time. It’s working (and I have to keep the [id=“tabBar”]. But as I adjust my logo to 25 % I got this strange duplicate & the hamburger is coming back.

I copy the CSS there so that you can get the logo, assuming you can read it

<pre><div><style>
[data-test="glide-app-bar"] :nth-child( 1 ) {
    backdrop-filter: opacity(0);
    background: transparent;   
    background-repeat: no-repeat; 
    background-position: left, center; left:10px;
    background-image: URL("https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/z4Ail4Md63ErhOguc9bo/pub/t7LwU3WnmnMGtFKkuCWX.png");
display: flex;
background-size: 25%;
}

[id="tabBar"] {
    backdrop-filter: opacity(0);
    background: transparent; 
}
</pre></div></style>

<div style ="position: fixed;
animation: slidedissolve 10s;
animation-fill-mode: forwards;
top: 0px; 
width: 100%;
height: 100%;
left: 0%;
opacity: 100;
margin-left: 0px;
background-color: rgba(191, 41, 255, 0.62); 
backdrop-filter: blur(5px);
border-radius: 16px;
padding-top: 0%;
padding-left: 0%;
padding-right: 0%;
box-shadow: 0 4px 30px #bf29ff;
rgba(0, 0, 0, 0.1);
text-align: center;
z-index:10 !important;
border: 1px solid rgba(191, 41, 255, 1);"
</div>

<pre><span><style>
@keyframes slidedissolve {
  from {left: 0px; opacity: 1;}
  to {left: -100%; opacity: 0.1;
}
</pre></span></style>

For my profile pic, thks, yeah, it’s very complicated to get a decent picture. Still have not succeeded in shooting one good enough for my future resume. Friends say my hands are expressive

Himaladin · November 6, 2021, 1:57pm

I see you changed my background-size/position. Can you try from what I gave:
background-size: 120px 20px; (customized to logo size)
background-repeat: no-repeat;
background-position: bottom 10px left 30px; (set this section)

L.M · November 6, 2021, 2:00pm

I add this to remove the hamburger (I forgot than in this lab app, the former logo was on a black bcg so hid the hamburger with its color, not the CSS!)

[data-test="nav-button-menu"]
{display: none}

My logo does not agree with your dimensions So I adjust to display it properly. Here it is, attached.
SharonPMPoppins477x97

Himaladin · November 6, 2021, 2:03pm

Looks like it’s getting close

L.M · November 6, 2021, 2:04pm

Oh yeah
Breaking news 15:11 CET. Looks like it’s working, now @Himaladin. I’m adjusting the colors and try to integrate it for real. Fingers crossed!

Himaladin · November 6, 2021, 2:19pm

Pleased to hear it.
Now I can sleep soundly.

Himaladin · November 7, 2021, 3:27am

Can you see it from the iPhone to test if it still works normally? Or we should kill all top bars; and change your logo image with div.

Topic		Replies	Views
Ok, I'm fan of Glassmorphism in dark mode, any chance I can do this? Ask for Help	27	1995	January 17, 2024
My Humble Eclipse & Glassmorphism Door Project Showcase	8	260	October 30, 2021
🆕 Please try the new Glide builder General	217	6723	September 6, 2021
Help! Redo last hour? Managed to delete a tab that took very long to create Report a Bug	6	354	July 29, 2020
Any insight on screen flow availability? Ask for Help	4	297	November 21, 2024

Open Sesame! My 1st Trial to open a Glassmorph & Eclipse Door

Related topics