Vertical Image Carousel – GSAP Elementor

So if you follow along in the video, I refer to this blog post as a reference for you to enter the CSS code into the Custom CSS option inside the containers, so below is everything you will need!

Here are some images to use when following the example,
These are copyrighted so please don’t use them outside of this tutorial.

The css code used in the column 1 Container that houses the first images.

This is put into the Custom CSS tab under Advanced Settings of the 1st column :

				
					.image1 img{
    animation: imagemovement1 15s ease-in-out infinite alternate;
}

#column1 {
    height:700px;
    max-height: 700px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0));
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0));
}

@keyframes imagemovement1 {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}

The css code used in the column 2 Container that houses the second set of images.

This is put into the Custom CSS tab under Advanced Settings of the 2nd column :

				
					.image2 img{
    animation: imagemovement2 15s ease-in-out infinite alternate;
}

#column2 {
    height:700px;
    max-height: 700px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0));
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0));
}

/* Keyframes for the looping animation */
@keyframes imagemovement2 {
    0% {
        transform: translateY(-100%); /* Start at the bottom of the container */
    }
    100% {
        transform: translateY(0); /* Move to the top of the container */
    }
}

The css code used in the column 3 Container that houses the third set ofimages.

This is put into the Custom CSS tab under Advanced Settings of the 3rd column :

				
					.image3 img{
    animation: imagemovement3 15s ease-in-out infinite alternate;
}

#column3 {
    height:700px;
    max-height: 700px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0));
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0));
}

@keyframes imagemovement3 {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}