How To Create Auto Vertical Scrolling Content Using Elementor Free

In this tutorial, I'll show you using Elementor Free, How to Make Endless Vertical Auto-Scrolling Animation | Creative & Unique WordPress Elementor Container Tutorial!!!

Quick Summary

In this tutorial, I'll show you using Elementor Free, How to Make Endless Vertical Auto-Scrolling Animation | Creative & Unique WordPress Elementor Container Tutorial!!!

(Exclusive: Click above link & use "JFD10" coupon code to get upto 78% DISCOUNT!)

10 Million+ website owners started using the Elementor page builder. I'll show you the easiest way how you can create your personal resume website using Elementor Page Builder yourself.

And, lastly, If you want me to build your AWESOME website at an affordable price,

Tools and Links Used

Hostinger Fast, beginner friendly WordPress hosting.

Get Hosting

Elementor The free page builder this tutorial is built with.

Get Elementor

Elementor Pro The Pro upgrade used throughout this tutorial.

Get Elementor Pro

Project Files Download the resources used in this tutorial.

Download Files

Kitpapa Ready made Elementor template kits.

Get Templates

Kitninja eCommerce Elementor template kits.

Get Templates

Prompt Used in This Tutorial

Auto Vertical Scrolling Content Style Css

<style>

/*For Container Height*/
.slider-container {
  height: 556px;
  overflow: hidden;
  position: relative;
}

/*Control Animation Speed*/
.slider{
  animation: scrollUp 2000s linear infinite;
}

/*It Creates The Animation*/
@keyframes scrollUp {
  0% {
    transform: translate3d(0, 0%, 0);
  }
  100% {
    transform: translate3d(0, -100%, 0);
  }
}

/*Responsive Adjustments*/
@media (max-width: 1024px){
.slider-container {
    height: 517px;
    }
}

@media (max-width: 767px){
    
.slider{
  animation: scrollUp 8s linear infinite;
}    

.slider-container {
    height: 520px!important;
}
    
@keyframes scrollUp {
  0% {
    transform: translate3d(0, 0%, 0);
  }
  100% {
    transform: translate3d(0, -44%, 0);
  }
}
}

</style>

Auto Vertical Scrolling Content Style Css Classes

slider-container
slider

Auto Vertical Scrolling Content JS Code

<script>
    var elements = $('.slider').length;
for(var i=0;i < elements; i++){
 $(".slider").clone().prependTo( ".slider" );
};
var liEle = [];
var liEle = $(".slider");
</script>

Get Your FREE Freelancing Roadmap

Stop hopping between tutorials. Grab the Freelancing Mastery Handbook to learn how to choose a skill, build your foundation, find clients, and confidently start your freelancing journey.

Free eBook Download

How To Create Auto Vertical Scrolling Content Using Elementor Free

Quick Summary

Tools and Links Used

Prompt Used in This Tutorial

Get Your FREE Freelancing Roadmap

Related Tutorials

Vibe Code a REAL Animated WordPress Website with Claude + Elementor

Vibe Coding Full Course for Beginners – Build & Launch a Real SaaS

Edit Videos with ChatGPT Codex — Raw Clips to Finished Reel