# How about a double door?

**URL:** https://community.glideapps.com/t/how-about-a-double-door/23215
**Category:** Project Showcase
**Created:** [February 22, 2021, 10:10am UTC](https://community.glideapps.com/t/how-about-a-double-door/23215 "2021-02-22T10:10:46Z")
**Posts on this page:** 19
**Page:** 1

<div class="post-metadata">

### Author: ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)
#### Post date: [February 22, 2021, 10:10am UTC](https://community.glideapps.com/t/how-about-a-double-door/23215/1 "2021-02-22T10:10:46Z")

</div>

```
<div class="boxbox">
<p class="beceaa">Double door<br>This is the animation that you can see the inside of the room with the doors open on both sides.<br><br><img class="woodman" src="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/EDxaxHAZKfbYKIyjmIus/pub/nzLVUCQ4BiWryP6KUGd9.png"></p>
<p class="openopen">O P E N</p>
<div class="leftdoor"></div>
<div class="rightdoor"></div>
</div>
<style>
img.woodman{
width: 35% !important;
}
.boxbox{
position: fixed;
top:0;
width:101%;
margin-left:-4.5%;
height:850px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(to bottom, white, #ccc) !important;
}
.beceaa:first-line{
font-size: 40px;
line-height: 50px;
font-weight: bold;
color: #662929;
}
.bece{
width: 75%;
color: #000;
}
.leftdoor,.rightdoor {
position: fixed;
top:0;
width: 50%;
height: 850px;
background: #671200;
}
.leftdoor {
left:0;
transform-origin: left;
animation: movel 4s forwards ; 
animation-delay: 1s;
background: linear-gradient(to right, #3d0000, #662929) ;
}
.rightdoor {
right:0;
transform-origin: right;
animation: moveR 4s forwards ; 
animation-delay: 1s;
background: linear-gradient(to left, #3d0000, #662929) ;
}
@keyframes movel {  
100% { transform: scaleX(0) perspective(50px) rotateY(5deg); }
}
@keyframes moveR {  
100% { transform: scaleX(0) perspective(50px) rotateY(-5deg); }
}
.openopen{
    z-index: 10;
    position: fixed;
    width:100%;
    font-size: 4.5rem !important;
    color: #fff;
    animation: move_o 5s forwards; 
}
@keyframes move_o {  
100% { opacity:0; }
}
/*Hide tytle at the top——————————————*/
[data-test="glide-app-bar"] {display: none}
/*Hide the bar at the bottom——————————————*/
#tabBar{ display:none; }
/*——————————————*/
[data-test="app-button-view"] {
-webkit-transform: rotate(90deg);
height: 42px;
position: fixed;
right:-25px;
bottom: 10%;
background : #000 !important;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
filter: none;
}
@media only screen and (max-width: 700px) {
.boxbox,.leftdoor,.rightdoor{
height:100vh;
}/*media only screen */
```

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [February 22, 2021, 11:16am UTC](https://community.glideapps.com/t/how-about-a-double-door/23215/2 "2021-02-22T11:16:56Z")

</div>

You are a real wizard of CSS, how is your magic works on tablet view?

---

<div class="post-metadata">

### Author: ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)
#### Post date: [February 23, 2021, 4:45am UTC](https://community.glideapps.com/t/how-about-a-double-door/23215/3 "2021-02-23T04:45:21Z")

</div>

Thank you [Uzo](https://community.glideapps.com/u/Uzo).  
My CSS is a test version of the idea.  
When actually using it, it will be necessary to verify the tablet view and desktop view.

I think the CSS this time will be as follows in tablet size.

---

<div class="post-metadata">

### Author: ![Carlos\_DeSilva](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carlos_desilva/32/19965_2.png) [@Carlos\_DeSilva](https://community.glideapps.com/u/Carlos_DeSilva)
#### Post date: [February 23, 2021, 4:54am UTC](https://community.glideapps.com/t/how-about-a-double-door/23215/4 "2021-02-23T04:54:25Z")

</div>

Amazing work. I need to hang out with you more often. 😂

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [February 23, 2021, 4:58am UTC](https://community.glideapps.com/t/how-about-a-double-door/23215/5 "2021-02-23T04:58:07Z")

</div>

just tested in my App… this is GREAT!!!  
looks good on full screen

[https://youtu.be/u-BnjpUHI9A](https://youtu.be/u-BnjpUHI9A)

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [February 23, 2021, 6:20am UTC](https://community.glideapps.com/t/how-about-a-double-door/23215/6 "2021-02-23T06:20:30Z")

</div>

if you can make an image behind the door that will adjust to screen size, so it will look good on mobile and desktop, and if if not too much to ask… the door make more fancy 😉

 ![door](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/6/3689849c5fa1da464a0680d724f43635af271192.jpeg)

---

<div class="post-metadata">

### Author: ![Wiz.Wazeer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wiz.wazeer/32/72423_2.png) [@Wiz.Wazeer](https://community.glideapps.com/u/Wiz.Wazeer)
#### Post date: [February 23, 2021, 10:11am UTC](https://community.glideapps.com/t/how-about-a-double-door/23215/7 "2021-02-23T10:11:19Z")

</div>

Agree with the wizard of CSS bit

---

<div class="post-metadata">

### Author: ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)
#### Post date: [February 24, 2021, 5:20am UTC](https://community.glideapps.com/t/how-about-a-double-door/23215/8 "2021-02-24T05:20:18Z")

</div>

I see! You need a door, right?  
How about this?

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [February 24, 2021, 5:57am UTC](https://community.glideapps.com/t/how-about-a-double-door/23215/9 "2021-02-24T05:57:18Z")

</div>

how many times i have to say, that you are the best!?

---

<div class="post-metadata">

### Author: ![gvalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gvalero/32/1037_2.png) [@gvalero](https://community.glideapps.com/u/gvalero)
#### Post date: [February 24, 2021, 2:02pm UTC](https://community.glideapps.com/t/how-about-a-double-door/23215/10 "2021-02-24T14:02:55Z")

</div>

Wao… it’s the Chuck Norris level, no doubtl!! 🙃

My main concern with this is the APP performance. As you should know, there are some CSS tricks that cause some problems on this topic and should be avoided.

But meanwhile… your tricks are a good tool to learn and enjoy. Thanks for sharing

Saludos @hisashi.fujita

---

<div class="post-metadata">

### Author: ![scorpio](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/scorpio/32/38799_2.png) [@scorpio](https://community.glideapps.com/u/scorpio)
#### Post date: [March 30, 2022, 10:54pm UTC](https://community.glideapps.com/t/how-about-a-double-door/23215/11 "2022-03-30T22:54:01Z")

</div>

How do you put a button in the center to enter?

---

<div class="post-metadata">

### Author: ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)
#### Post date: [March 31, 2022, 1:03am UTC](https://community.glideapps.com/t/how-about-a-double-door/23215/12 "2022-03-31T01:03:25Z")

</div>

Hi @ Scorpio  
There are several possible methods.  
The easiest way to build it within glide is:

★ First, prepare a screen with only the door image and buttons.  
★ Set “Show New Screen” for the button action.  
★ On the new screen, write the code for opening the door.

---

<div class="post-metadata">

### Author: ![scorpio](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/scorpio/32/38799_2.png) [@scorpio](https://community.glideapps.com/u/scorpio)
#### Post date: [March 31, 2022, 2:01pm UTC](https://community.glideapps.com/t/how-about-a-double-door/23215/13 "2022-03-31T14:01:12Z")

</div>

Hi @hisashi.fujita Thanks  
How can I put a graphic of some doors to your code?

That’s how the app stayed:

> **[Carmelo's Project](https://puertas.glideapp.io/)**

```auto
<div class="boxbox">
<p class="beceaa"><br><br><img class="woodman" src=""></p>
<p class="openopen"></p>
<div class="leftdoor"></div>
<div class="rightdoor"></div>
</div>
<style>
img.woodman{
width: 35% !important;
}
.boxbox{
position: fixed;
top:0;
width:%;
margin-left:%;
height:px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(to bottom, white, #) !important;
}
.beceaa:first-line{
font-size: 40px;
line-height: 50px;
font-weight: bold;
color: #;
}
.bece{
width: 75%;
color: #000;
}
.leftdoor,.rightdoor {
position: fixed;
top:0;
width: 50%;
height: 850px;
background: #ba55ac;
}
.leftdoor {
left:0;
transform-origin: left;
animation: movel 4s forwards ; 
animation-delay: 1s;
background-image: url("https://i.ibb.co/1njYfwr/puertaiz.png"); 
}
.rightdoor {
right:0;
transform-origin: right;
animation: moveR 4s forwards ; 
animation-delay: 1s;
background-image: url("https://i.ibb.co/52kvzGD/puertader.png"); 
}
@keyframes movel {  
100% { transform: scaleX(0) perspective(50px) rotateY(5deg); }
}
@keyframes moveR {  
100% { transform: scaleX(0) perspective(50px) rotateY(-5deg); }
}
.openopen{
    z-index: 10;
    position: fixed;
    width:100%;
    font-size: 4.5rem !important;
    color: #fff;
    animation: move_o 5s forwards; 

}
@keyframes move_o {  
100% { opacity:0; }
}
/Hide tytle at the top——————————————/
[data-test="glide-app-bar"] {display: none}
/Hide the bar at the bottom——————————————/
#tabBar{ display:none; }
/——————————————/
[data-test="app-button-view"] {
-webkit-transform: rotate(90deg);
height: 42px;
position: fixed;
right:-25px;
bottom: 10%;
background : #000 !important;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
filter: none;
}
@media only screen and (max-width: 700px) {
.boxbox,.leftdoor,.rightdoor{
height:100vh;
}/*media only screen

```

the images would be these  
left

 ![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/c/7c6f2325bd8bbc40182d711ad6ef9944dd3a474d.jpeg)  
Right  
 ![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/4/6419d6ba9b7ec3376ebddb1be06995329d4a8a0e.jpeg)

And why can’t you see the effect of opening the door on an iPhone?

Thank you

---

<div class="post-metadata">

### Author: ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)
#### Post date: [April 1, 2022, 2:34am UTC](https://community.glideapps.com/t/how-about-a-double-door/23215/14 "2022-04-01T02:34:53Z")

</div>

This HTML and CSS code is an introduction to what I was testing over a year ago.  
★ Therefore, the details of the code cannot be explained without taking some time to verify it.  
★ We have not performed any verification using the iPhone.

The following code may be helpful for how to arrange the door image in your question.  
★ Enter the url of the door image in the src of「 leftdoor」and 「rightdoor"」.

```auto
<div class = "leftdoor">
<img src = "https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/VXzb3wsuFg847RI8uyO3/pub/F1JSJwzRWeuYXwEe2MXI.png"> </ div>
<div class = "rightdoor">
<img src = "https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/VXzb3wsuFg847RI8uyO3/pub/E6MtNkDFgl0ujfhHeMve.png"> </ div>
<!--------------------------------->
<pre> <span> <style>
    .leftdoor, .rightdoor {
    position: absolute;
    z-index: 8;
    position: fixed;
    top: 0;
    width: 50%;
    height: 100%! important;
    }
    .leftdoor {
    left: 0;
    transform-origin: left;
    animation: movel 4s forwards;
    animation-delay: 1s;
    }
    .rightdoor {
    right: 0;
    transform-origin: right;
    animation: moveR 4s forwards;
    animation-delay: 1s;
    }
    .leftdoor img, .rightdoor img {
    width: 100%;
    height: 100%;
object-fit: cover;
    }
    @keyframes movel {
    100% {transform: scaleX (0) perspective (50px) rotateY (5deg);}}
    @keyframes moveR {
    100% {transform: scaleX (0) perspective (50px) rotateY (-5deg);}}
    @keyframes move_o {100% {opacity: 0;}}
.opentytle {
        position: fixed;
        z-index: 300;
        width: 100%;
        top: 50%;
        font-size: 70px! important;
        opacity: 0.7;
        text-align: center;
        margin-left: -5%;
        color: #fff;
        animation: move_o 5s forwards;
    }
[data-test = "glide-app-bar"] {display: none}
/ * ------------------ * /
    @media only screen and (max-width: 500px) {
    .leftdoor, .rightdoor {
    height: 100vh;
    }
    } / * media only screen * /
@media screen and (max-width: 500px) {
 .opentytle {margin-left: 5vw;}
}

```

---

<div class="post-metadata">

### Author: ![scorpio](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/scorpio/32/38799_2.png) [@scorpio](https://community.glideapps.com/u/scorpio)
#### Post date: [April 1, 2022, 11:29am UTC](https://community.glideapps.com/t/how-about-a-double-door/23215/15 "2022-04-01T11:29:06Z")

</div>

hi @hisashi.fujita Good thanks for your time.

> **[Carmelo's Project](https://puertas.glideapp.io/)**

Does not work on _ **ios** _ on _ **android** _ yes

Thanks you

---

<div class="post-metadata">

### Author: ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)
#### Post date: [April 4, 2022, 1:16am UTC](https://community.glideapps.com/t/how-about-a-double-door/23215/16 "2022-04-04T01:16:54Z")

</div>

Hi @scorpio  
thank you for contacting.

On my smartphone (android / iPhone), the door of your app is open without any problems.

---

<div class="post-metadata">

### Author: ![scorpio](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/scorpio/32/38799_2.png) [@scorpio](https://community.glideapps.com/u/scorpio)
#### Post date: [April 4, 2022, 12:52pm UTC](https://community.glideapps.com/t/how-about-a-double-door/23215/17 "2022-04-04T12:52:27Z")

</div>

hi  
on my smartphone iphone xs max

> **[Puertas glideapp](https://www.youtube.com/shorts/HHfqzzAAs2U)**

---

<div class="post-metadata">

### Author: ![Blue\_Community](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/blue_community/32/16616_2.png) [@Blue\_Community](https://community.glideapps.com/u/Blue_Community)
#### Post date: [April 4, 2022, 6:33pm UTC](https://community.glideapps.com/t/how-about-a-double-door/23215/18 "2022-04-04T18:33:46Z")

</div>

> [@hisashi.fujita](#):
>
> ```auto
> <div class="boxbox">
> <p class="beceaa">Double door<br>This is the animation that you can see the inside of the room with the doors open on both sides.<br><br><img class="woodman" src="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/EDxaxHAZKfbYKIyjmIus/pub/nzLVUCQ4BiWryP6KUGd9.png"></p>
> <p class="openopen">O P E N</p>
> <div class="leftdoor"></div>
> <div class="rightdoor"></div>
> </div>
> <style>
> img.woodman{
> width: 35% !important;
> }
> .boxbox{
> position: fixed;
> top:0;
> width:101%;
> margin-left:-4.5%;
> height:850px;
> display: flex;
> align-items: center;
> justify-content: center;
> text-align: center;
> background: linear-gradient(to bottom, white, #ccc) !important;
> }
> .beceaa:first-line{
> font-size: 40px;
> line-height: 50px;
> font-weight: bold;
> color: #662929;
> }
> .bece{
> width: 75%;
> color: #000;
> }
> .leftdoor,.rightdoor {
> position: fixed;
> top:0;
> width: 50%;
> height: 850px;
> background: #671200;
> }
> .leftdoor {
> left:0;
> transform-origin: left;
> animation: movel 4s forwards ; 
> animation-delay: 1s;
> background: linear-gradient(to right, #3d0000, #662929) ;
> }
> .rightdoor {
> right:0;
> transform-origin: right;
> animation: moveR 4s forwards ; 
> animation-delay: 1s;
> background: linear-gradient(to left, #3d0000, #662929) ;
> }
> @keyframes movel {  
> 100% { transform: scaleX(0) perspective(50px) rotateY(5deg); }
> }
> @keyframes moveR {  
> 100% { transform: scaleX(0) perspective(50px) rotateY(-5deg); }
> }
> .openopen{
> z-index: 10;
> position: fixed;
> width:100%;
> font-size: 4.5rem !important;
> color: #fff;
> animation: move_o 5s forwards; 
> }
> @keyframes move_o {  
> 100% { opacity:0; }
> }
> /*Hide tytle at the top——————————————*/
> [data-test="glide-app-bar"] {display: none}
> /*Hide the bar at the bottom——————————————*/
> #tabBar{ display:none; }
> /*——————————————*/
> [data-test="app-button-view"] {
> -webkit-transform: rotate(90deg);
> height: 42px;
> position: fixed;
> right:-25px;
> bottom: 10%;
> background : #000 !important;
> border-top-right-radius: 0px;
> border-top-left-radius: 0px;
> filter: none;
> }
> @media only screen and (max-width: 700px) {
> .boxbox,.leftdoor,.rightdoor{
> height:100vh;
> }/*media only screen */
> 
> ```

the version inside code-book takes over the page and is impossible to remove… just fyi

---

<div class="post-metadata">

### Author: ![rudy\_jennifer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rudy_jennifer/32/60429_2.png) [@rudy\_jennifer](https://community.glideapps.com/u/rudy_jennifer)
#### Post date: [June 14, 2023, 11:46pm UTC](https://community.glideapps.com/t/how-about-a-double-door/23215/19 "2023-06-14T23:46:27Z")

</div>

hello if i want to put those 2 doors in it can you give me the full code please?

 ![Asset 3](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/c/fca3e118f851dde5058f2432cf964a33c11af069.jpeg)  
 ![Asset 4](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/3/93bd23386a22d5d2d97938d2b42b695d05dd2e37.jpeg)