Tutorials demo

Popup animation effects demo

Bounce

Bounce to bottom

Bounce to bottom animation

 

 

 

1. Copy class suffix

 

gb-popup-bounce-to-bottom

 

 

2. Copy CSS code

 


.visible-section .gb-popup-bounce-to-bottom,
.visible-lightbox .gb-popup-bounce-to-bottom {
 animation: gb-popup-bounce-to-bottom 1.1s both;
}
 
@keyframes gb-popup-bounce-to-bottom {
 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;}
}
Bounce to left

Bounce to left animation

 

 

 

1. Copy class suffix

 

gb-popup-bounce-to-left

 

 

2. Copy CSS code

 

.visible-section .gb-popup-bounce-to-left,
.visible-lightbox .gb-popup-bounce-to-left {
 animation: gb-popup-bounce-to-left 1.1s both;
}
 
@keyframes gb-popup-bounce-to-left {
 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;}
}
Bounce to right

Bounce to right animation

 

 

 

1. Copy class suffix

 

gb-popup-bounce-to-right

 

 

2. Copy CSS code

 


.visible-section .gb-popup-bounce-to-right,
.visible-lightbox .gb-popup-bounce-to-right {
 animation: gb-popup-bounce-to-right 1.1s both;
}
 
@keyframes gb-popup-bounce-to-right {
 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;}
}
Bounce to top

Bounce to top animation

 

 

 

1. Copy class suffix

 

gb-popup-bounce-to-top

 

 

2. Copy CSS code

 


.visible-section .gb-popup-bounce-to-top,
.visible-lightbox .gb-popup-bounce-to-top {
 animation: gb-popup-bounce-to-top 1.1s both;
}
 
@keyframes gb-popup-bounce-to-top {
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

Scale In

Scale In animation

 

 

 

1. Copy class suffix

 

gb-popup-scale

 

 

2. Copy CSS code

 


.gb-popup-scale {
 opacity: 0;
 transform: scale(2);
 transition: all 0.3s;
}
 
.visible-section .gb-popup-scale,
.visible-lightbox .gb-popup-scale {
 transform: scale(1);
 opacity: 1;
}
Scale with blur

Scale with blur animation

 

 

 

1. Copy class suffix

 

gb-popup-scale-blur

 

 

2. Copy CSS code

 


@keyframes gb-popup-scale-blur {
 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 .gb-popup-scale-blur,
.visible-lightbox .gb-popup-scale-blur {
 animation: gb-popup-scale-blur 1s both;
}
Scale Ta-da

Scale Ta-da animation

 

 

 

1. Copy class suffix

 

gb-popup-scale-tada

 

 

2. Copy CSS code

 


.visible-section .gb-popup-scale-tada,
.visible-lightbox .gb-popup-scale-tada {
 animation: gb-popup-scale-tada 1.1s both;
}
 
@keyframes gb-popup-scale-tada {
 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

3d cube

3D cube animation

 

 

 

1. Copy class suffix

 

gb-popup-cube

 

 

2. Copy CSS code

 


.visible-section > .ba-wrapper,
.visible-lightbox .ba-lightbox {
 perspective: 1000px;
}
 
.gb-popup-cube {
 transform: rotateX(90deg) translateY(-22px);
 opacity: 0;
}
 
.visible-section .gb-popup-cube,
.visible-lightbox .gb-popup-cube {
 transform: rotateX(0) translateY(0);
 transform-origin: 50% 0;
 transform-style: preserve-3d;
 transition: transform 0.8s; 
 opacity: 1;
}
 
.gb-popup-cube: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%;
}
3d swing

3D swing animation

 

 

 

1. Copy class suffix

 

gb-popup-swing

 

 

2. Copy CSS code

 


@keyframes gb-popup-swing {
 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 .gb-popup-swing,
.visible-lightbox .gb-popup-swing {
 animation: gb-popup-swing 0.7s ease-in-out both;
}
 
@keyframes gb-popup-swing {
 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 .gb-popup-swing .ba-section-items,
.visible-lightbox .gb-popup-swing .ba-section-items {
 animation: effect-9 0.7s ease-in-out;
 animation-delay: 0.06s;
}

Flip

Flip

Flip animation

 

 

 

1. Copy class suffix

 

gb-popup-flip

 

 

2. Copy CSS code

 


.visible-section > .ba-wrapper,
.visible-lightbox {
 perspective: 1300px; 
}
 
.gb-popup-flip {
 transform-style: preserve-3d;
 transform: rotateX(-70deg);
 transition: all 0.3s;
 opacity: 0;
}
 
.visible-section .gb-popup-flip,
.visible-lightbox .gb-popup-flip {
 transform: rotateX(0deg);
 opacity: 1;
}
Flip page

Flip page animation

 

 

 

1. Copy class suffix

 

gb-popup-flip-page

 

 

2. Copy CSS code

 


@-webkit-keyframes gb-popup-flip-page {
 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 .gb-popup-flip-page,
.visible-lightbox .gb-popup-flip-page {
 animation: gb-popup-flip-page 1s both;
}
Flip bounce

Flip bounce animation

 

 

 

1. Copy class suffix

 

gb-popup-flip-bounce

 

 

2. Copy CSS code

 


@keyframes gb-popup-flip-bounce {
 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 .gb-popup-flip-bounce,
.visible-lightbox .gb-popup-flip-bounce {
 animation: gb-popup-flip-bounce 2s linear;
}
Flip raise

Flip raise animation

 

 

 

1. Copy class suffix

 

gb-popup-flip-raise

 

 

2. Copy CSS code

 


@keyframes gb-popup-flip-raise {
 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 .gb-popup-flip-raise,
.visible-lightbox .gb-popup-flip-raise {
 animation: gb-popup-flip-raise 1s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
Flip newspaper

Flip newspaper animation

 

 

 

1. Copy class suffix

 

gb-popup-flip-newspaper

 

 

2. Copy CSS code

 


.visible-section > .ba-wrapper,
.visible-lightbox {
 perspective: 1300px; 
}
 
.gb-popup-flip-newspaper {
 opacity: 0;
 transform: scale(0) rotate(720deg);
 transition: all 0.3s;
}
 
.visible-section .gb-popup-flip-newspaper,
.visible-lightbox .gb-popup-flip-newspaper {
 transform: scale(1) rotate(0deg);
 opacity: 1;
}

Slide

Slide zoom left

Slide zoom left animation

 

 

 

1. Copy class suffix

 

gb-popup-slide-zoom-left

 

 

2. Copy CSS code

 


@keyframes gb-popup-slide-zoom-left {
 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 .gb-popup-slide-zoom-left,
.visible-lightbox .gb-popup-slide-zoom-left {
 animation: gb-popup-slide-zoom-left 1s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
Slide zoom right

Slide zoom right animation

 

 

 

1. Copy class suffix

 

gb-popup-slide-zoom-right

 

 

2. Copy CSS code

 


@keyframes gb-popup-slide-zoom-right {
 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 .gb-popup-slide-zoom-right,
.visible-lightbox .gb-popup-slide-zoom-right {
 animation: gb-popup-slide-zoom-right 1s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
Slide flip

Slide flip animation

 

 

 

1. Copy class suffix

 

gb-popup-slide-flip

 

 

2. Copy CSS code

 


.visible-section {
 perspective: 1300px;
}
 
.gb-popup-slide-flip,
.gb-popup-slide-flip {
 transform-style: preserve-3d;
 transform: translateZ(100px) translateX(-30%) rotateY(90deg);
 transform-origin: 0 100%;
 opacity: 0;
 transition: all 0.3s;
}
 
.visible-section .gb-popup-slide-flip,
.visible-lightbox .gb-popup-slide-flip {
 transform: translateZ(0px) translateX(0%) rotateY(0deg);
 opacity: 1;
}
Slide Ta-da left

Slide Ta-da left animation

 

 

 

1. Copy class suffix

 

gb-popup-slide-tada-left

 

 

2. Copy CSS code

 


@keyframes gb-popup-slide-tada-left {
 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 .gb-popup-slide-tada-left,
.visible-lightbox .gb-popup-slide-tada-left {
 animation: gb-popup-slide-tada-left 1s linear !important;
}
Slide Ta-da right

Slide Ta-da right animation

 

 

 

1. Copy class suffix

 

gb-popup-slide-tada-right

 

 

2. Copy CSS code

 


@keyframes gb-popup-slide-tada-right {
 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 .gb-popup-slide-tada-right,
.visible-lightbox .gb-popup-slide-tada-right {
 animation: gb-popup-slide-tada-right 1s linear !important;
}
Slide zoom In diagonal

Slide zoom diagonal animation

 

 

 

1. Copy class suffix

 

gb-popup-slide-zoom-diagonal

 

 

2. Copy CSS code

 


@keyframes gb-popup-slide-zoom-diagonal {
 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 .gb-popup-slide-zoom-diagonal,
.visible-lightbox .gb-popup-slide-zoom-diagonal {
 animation: gb-popup-slide-zoom-diagonal 1s both;
}