Augusto Barroso

ok. I gonna try. Thank you.

I mean, VsOpts.$slides.lengh is getting 8 because I have 4 elements at my foreach loop.

The problem is that my code is inside a foreach. When I put outside, works fine. foreach (var item in Model) { <div class="col-xl-2 col-lg-2 col-md-3 col-sm-6 col-6 p-1"> <div class="card bg-light text-center"> <div class="card-body m-1 p-1"> <!-- Text vertical slider --> <div class="v-slider-frame col-12 offset-12"> <ul class="v-slides"> <li class="v-slide">Text 1</li> <li class="v-slide">Text 2</li> </ul> </div> </div> </div> </div> } On the javascript, VsOpts.$slides.lengh is getting 8 elements. It supose to be 2. vsOpts.$slides.each(function (i) { vSlide.to(vsOpts.$list, vsOpts.duration / vsOpts.$slides.length, { y: i * -1 * vsOpts.lineHeight, ease: Elastic.easeOut.config(1, 0.4) }) })

https://codepen.io/gutobarroso/pen/OJPNpad working fine on codepen, but at my code.

Hi guys! As you can see below, I have 2 texts for vertical slide. But it looks like I have 6 more empty texts. The two texts slide normaly. But thers are a time untill they slide again. Whats wrong? What can I do for dont have this "gap". I appreciate the help ## HTML code <div class="row pl-2 pr-2"> @foreach (var item in Model) { <div class="col-xl-2 col-lg-2 col-md-3 col-sm-6 col-6 p-1"> <div class="card bg-light text-center"> <div class="card-body m-1 p-1"> @* Text vertical slider *@ <div class="v-slider-frame col-12 offset-12"> <ul class="v-slides"> <li class="v-slide">Text 1</li> <li class="v-slide">Text 2</li> </ul> </div> </div> </div> </div> } </div> ## CSS <style> .v-slider-frame { height: 20px; overflow: hidden; text-align: center; } ul.v-slides { list-style-type: none; transform: translateY(20px); padding: 0; } .v-slide { line-height: 20px; float:left; text-align: left; color: darkgrey; font-size: 12px; } </style> ## Javascript <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> <script type="text/javascript"> var vsOpts = { $slides: $('.v-slide'), $list: $('.v-slides'), duration: 6, lineHeight: 20 } var vSlide = new TimelineMax({ paused: true, repeat: -1 }) vsOpts.$slides.each(function (i) { vSlide.to(vsOpts.$list, vsOpts.duration / vsOpts.$slides.length, { y: i * -1 * vsOpts.lineHeight, ease: Elastic.easeOut.config(1, 0.4) }) }) vSlide.play() </script>