20 Stylish Lightbox Animation For Joomla Website Builder Gridbox

20 Stylish Lightbox Animation For Joomla Website Builder Gridbox

The lightbox is an excellent way to showcase your business proposal. This fun element with attractive animation effects will add life to your website and increase the number of customers. And today we’re going to show you how to add an eye-catching and stylish animation for the lightbox of Joomla Website Builder Gridbox. These tips & tricks you can use for your existing or next project and take your website to the next level. So let's do it!


Notice!

Presented animation effects can be applied to Gridbox plugins: Overlay Section and Lightbox.


View Demo


Step 1: Copy Class Suffix.

Copy class suffix of the animation you like. Class Suffix should be placed in the field "Class Suffix" of the plugin Overlay Section or Lightbox.


Adding Class Suffix Lightbox - Joomla Website Builder Gridbox


Step 2: Copy CSS Code of Lightbox Effect.

Copy CSS code of the lightbox effect and paste to the Gridbox Code Editor.


Gridbox CSS Editor - Joomla Website Builder Gridbox


Bounce Lightbox Effects

Class Suffix: custom-effect-1

.visible-section .custom-effect-1,
.visible-lightbox .custom-effect-1 {
    animation: effect-1 1.1s both;
}

@keyframes effect-1 {
    0% {transform: translateY(-500px);animation-timing-function: ease-in;opacity: 0;}
    38% {transform: translateY(0);animation-timing-function: ease-out;opacity: 1;}
    55% {transform: translateY(-65px);animation-timing-function: ease-in;}
    72% {transform: translateY(0);animation-timing-function: ease-out;}
    81% {transform: translateY(-28px);animation-timing-function: ease-in;}
    90% {transform: translateY(0);animation-timing-function: ease-out;}
    95% {transform: translateY(-8px);animation-timing-function: ease-in;}
    100% {transform: translateY(0);animation-timing-function: ease-out;}
}


Class Suffix: custom-effect-2

.visible-section .custom-effect-2,
.visible-lightbox .custom-effect-2 {
    animation: effect-2 1.1s both;
}

@keyframes effect-2 {
    0% {transform: translateX(600px);animation-timing-function: ease-in;opacity: 0;}
    38% {transform: translateX(0);animation-timing-function: ease-out;opacity: 1;}
    55% {transform: translateX(68px);animation-timing-function: ease-in;}
    72% {transform: translateX(0);animation-timing-function: ease-out;}
    81% {transform: translateX(32px);animation-timing-function: ease-in;}
    90% {transform: translateX(0);animation-timing-function: ease-out;}
    95% {transform: translateX(8px);animation-timing-function: ease-in;}
    100% {transform: translateX(0);animation-timing-function: ease-out;}
}


Class Suffix: custom-effect-3

.visible-section .custom-effect-3,
.visible-lightbox .custom-effect-3 {
    animation: effect-3 1.1s both;
}

@keyframes effect-3 {
    0% {transform: translateX(-600px);animation-timing-function: ease-in;opacity: 0;}
    38% {transform: translateX(0);animation-timing-function: ease-out;opacity: 1;}
    55% {transform: translateX(-68px);animation-timing-function: ease-in;}
    72% {transform: translateX(0);animation-timing-function: ease-out;}
    81% {transform: translateX(-28px);animation-timing-function: ease-in;}
    90% {transform: translateX(0);animation-timing-function: ease-out;}
    95% {transform: translateX(-8px);animation-timing-function: ease-in;}
    100% {transform: translateX(0);animation-timing-function: ease-out;}
}


Class Suffix: custom-effect-4

.visible-section .custom-effect-4,
.visible-lightbox .custom-effect-4 {
    animation: effect-4 1.1s both;
}

@keyframes effect-4 {
    0% {transform: translateY(500px);animation-timing-function: ease-in;opacity: 0;}
    38% {transform: translateY(0);animation-timing-function: ease-out;opacity: 1;}
    55% {transform: translateY(65px);animation-timing-function: ease-in;}
    72% {transform: translateY(0);animation-timing-function: ease-out;}
    81% {transform: translateY(28px);animation-timing-function: ease-in;}
    90% {transform: translateY(0);animation-timing-function: ease-out;}
    95% {transform: translateY(8px);animation-timing-function: ease-in;}
    100% {transform: translateY(0);animation-timing-function: ease-out;}
}

Scale Lightbox Effects

Class Suffix: custom-effect-5

.custom-effect-5 {
    opacity: 0;
    transform: scale(2);
    transition: all 0.3s;
}

.visible-section .custom-effect-5,
.visible-lightbox .custom-effect-5 {
    transform: scale(1);
    opacity: 1;
}


Class Suffix: custom-effect-6

@keyframes hover-6 {
    0% {opacity: 0;transform-origin: 50% 50%;transform: scale(2, 2);filter: blur(90px);}
    100% {opacity: 1;transform-origin: 50% 50%;transform: scale(1, 1);filter: blur(0px);}
}

.visible-section .custom-effect-6,
.visible-lightbox .custom-effect-6 {
    animation: hover-6 1s  both;
}


Class Suffix: custom-effect-7

.visible-section .custom-effect-7,
.visible-lightbox .custom-effect-7 {
    animation: effect-7 1.1s both;
}

@keyframes effect-7 {
    0% {transform: scale3d(1, 1, 1);}
    10%, 20% {transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);}
    30%, 50%, 70%, 90% {transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);}
    40%, 60%, 80% {transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);}
    100% {transform: scale3d(1, 1, 1);}
}

3D Lightbox Effects

Class Suffix: custom-effect-8

.visible-section > .ba-wrapper,
.visible-lightbox  .ba-lightbox  {
    perspective: 1000px;
}

.custom-effect-8 {
    transform: rotateX(90deg) translateY(-22px);
    opacity: 0;
}

.visible-section .custom-effect-8,
.visible-lightbox .custom-effect-8 {
    transform: rotateX(0) translateY(0); 
    transform-origin: 50% 0;
    transform-style: preserve-3d;
    transition: transform 0.8s;  
    opacity: 1;
}

.custom-effect-8:after {
    align-items: center;
    backface-visibility: hidden;
    background: inherit;
    content: "";
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 100%;
    transform-origin: 50% 0;
    transform: rotateX(-90deg);
    transition: background 0.8s;
    width: 100%;
}


Class Suffix: custom-effect-9

@keyframes effect-9 {
    0% { transform: rotate(0deg) translate3d(0, 0, 0);}
    25% { transform: rotate(6deg) translate3d(0, 0, 0);}
    50% { transform: rotate(-6deg) translate3d(0, 0, 0);}
    75% { transform: rotate(3deg) translate3d(0, 0, 0);}
    100% { transform: rotate(0deg) translate3d(0, 0, 0);}
}

.visible-section .custom-effect-9,
.visible-lightbox .custom-effect-9 {
    animation: effect-9 0.7s ease-in-out both;
}

@keyframes effect-9 {
    0% { transform: translate3d(0, 0, 0) translateZ(0);}
    25% { transform: translate3d(8px, 0, 0) translateZ(0);}
    50% { transform: translate3d(-6px, 0, 0) translateZ(0);}
    75% { transform: translate3d(4px, 0, 0) translateZ(0);}
    100% { transform: translate3d(0, 0, 0) translateZ(0);}
}

.visible-section .custom-effect-9 .ba-section-items,
.visible-lightbox .custom-effect-9 .ba-section-items {
    animation: effect-9 0.7s ease-in-out;
    animation-delay: 0.06s;
}

Flip Lightbox Effects

Class Suffix: custom-effect-10

@-webkit-keyframes effect-10 {
    100% {opacity: 1;transform-origin: 0 0;transform: perspective(800px) rotateY(0deg) translateZ(0px);}
    0% {opacity: 0;transform-origin: 50% 0;transform: perspective(800px) rotateY(-180deg) translateZ(300px);}
}

.visible-section .custom-effect-10,
.visible-lightbox .custom-effect-10 {
    animation: effect-10 1s  both;
}


Class Suffix: custom-effect-11

@keyframes custom-effect-11 {
    from {transform: perspective(400px) rotate3d(0, 1, 0, 90deg);animation-timing-function: ease-in;opacity: 1;}
    40% {transform: perspective(400px) rotate3d(0, 1, 0, -20deg);animation-timing-function: ease-in;}
    60% {transform: perspective(400px) rotate3d(0, 1, 0, 10deg);opacity: 1;}
    80% {transform: perspective(400px) rotate3d(0, 1, 0, -5deg);}
    to {transform: perspective(400px);}
}

.visible-section .custom-effect-11,
.visible-lightbox .custom-effect-11 {
    animation: custom-effect-11 2s linear;
}


Class Suffix: custom-effect-12

@keyframes effect-12 {
    0% {opacity: 0;transform-origin: 50% 0%;transform: perspective(800px) rotateX(-90deg);}
    50% {opacity: 1;transform-origin: 50% 0%;transform: perspective(800px) rotateX(50deg);}
    100% {opacity: 1;transform-origin: 50% 0%;transform: perspective(800px) rotateX(0deg);}
}

.visible-section .custom-effect-12,
.visible-lightbox .custom-effect-12 {
    animation: effect-12 1s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}


Class Suffix: custom-effect-13

.visible-section > .ba-wrapper,
.visible-lightbox {
    perspective: 1300px;    
}

.custom-effect-13 {
    opacity: 0;
    transform: scale(0) rotate(720deg);
    transition: all 0.3s;
}

.visible-section .custom-effect-13,
.visible-lightbox .custom-effect-13 {
    transform: scale(1) rotate(0deg);
    opacity: 1;
}


Class Suffix: custom-effect-14

.visible-section > .ba-wrapper,
.visible-lightbox {
    perspective: 1300px;    
}

.custom-effect-14 {
    transform-style: preserve-3d;
    transform: rotateX(-70deg);
    transition: all 0.3s;
    opacity: 0;
}

.visible-section .custom-effect-14,
.visible-lightbox .custom-effect-14 {
    transform: rotateX(0deg);
    opacity: 1;
}

Slide Lightbox Effects

Class Suffix: custom-effect-15

@keyframes effect-15 {
    0% {opacity: 0;transform-origin: 100% 50%;transform: scale(0.2) translate(200%, 0%);}
    100% {opacity: 1;transform-origin: 100% 50%;transform: scale(1) translate(0%, 0%);}
}

.visible-section .custom-effect-15,
.visible-lightbox .custom-effect-15 {
    animation: effect-15 1s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}


Class Suffix: custom-effect-16

@keyframes effect-16 {
    0% {opacity: 0;transform-origin: 0% 50%;transform: scale(0.2) translate(-200%, 0%);}
    100% {opacity: 1;transform-origin: 0% 50%;transform: scale(1) translate(0%, 0%);}
}

.visible-section .custom-effect-16,
.visible-lightbox .custom-effect-16 {
    animation: effect-16 1s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}


Class Suffix: custom-effect-17

.visible-section {
    perspective: 1300px;
}

.custom-effect-17,
.custom-effect-17 {
    transform-style: preserve-3d;
    transform: translateZ(100px) translateX(-30%) rotateY(90deg);
    transform-origin: 0 100%;
    opacity: 0;
    transition: all 0.3s;
}

.visible-section .custom-effect-17,
.visible-lightbox .custom-effect-17 {
    transform: translateZ(0px) translateX(0%) rotateY(0deg);
    opacity: 1;
}


Class Suffix: custom-effect-18

@keyframes custom-effect-18 {
    0% {opacity: 0;transform: scale(1, 1) translateX(200%);}
    50%,70%,90% {opacity: 1;transform: scale(1.1, 1.1) translateX(0);}
    60%,80%,100% {opacity: 1;transform: scale(1, 1) translateX(0);}
}

.visible-section .custom-effect-18,
.visible-lightbox .custom-effect-18 {
    animation: custom-effect-18 1s linear !important;
}


Class Suffix: custom-effect-19

@keyframes custom-effect-19 {
    0% {opacity: 0;transform: scale(1, 1) translateX(-200%);}
    50%,70%, 90% {opacity: 1;transform: scale(1.1, 1.1) translateX(0);}
    60%,80%,100% {opacity: 1;transform: scale(1, 1) translateX(0);}
}

.visible-section .custom-effect-19,
.visible-lightbox .custom-effect-19 {
    animation: custom-effect-19 1s linear !important;
}


Class Suffix: custom-effect-20

@keyframes effect-20 {
    0% {opacity: 0;transform-origin: 0 100%;transform: scale(0, 0) translate(-700px, 0px);}
    100% {opacity: 1;transform-origin: 100% 100%;transform: scale(1, 1) translate(0px, 0px);}
}

.visible-section .custom-effect-20,
.visible-lightbox .custom-effect-20 {
    animation: effect-20 1s  both;
}

Step 3: Save and Check.

Save changes. Clear your browser cache and look results.