Reveal remarkably your page content!
Follow these steps to recreate this animation and reveal any content of your page in a stunning way with a curtain opening effect or an automatic sliding doors effect…
Just customize the design to your liking! You can add shadows to the columns, change the background color… Enjoy it!
Paste this into Row → Advanced → Main Element:
display: flex;
Paste this into Row → Left Column → Advanced → CSS Class:
rtl
Paste this into Row → Right Column → Advanced → CSS Class:
ltr
Paste this into Page Settings → Advanced → Custom CSS:
.et_pb_column_empty {display: block!important;}
.rtl {animation: rtl 5s linear forwards;}
.ltr {animation: ltr 5s linear forwards;}
@keyframes rtl {
0% {left: 0;}
100% {left: -100%;}
}
@keyframes ltr {
0% {left: 0;}
100% {left: 100%;}
}
Customize the animation speed by adjusting the value of 5s to your liking. In this case, 5 seconds is the time it takes for the curtain to fully open.
🥳 That’s it!
Boost your creativity!
Want to create all kinds of Navigation Menus even more easily?
