TweenMax vertical text slider

[Augusto Barroso]

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>

 

 

See the Pen RKPdEV by marklc44 (@marklc44) on CodePen

[ZachSaucier]

Hey Augusto and welcome to the GreenSock forums! 

 

Can you please recreate your issue in a CodePen? It's hard for us to help blind. There's nothing obviously wrong with your code that I can see.

[Augusto Barroso]

On 12/9/2019 at 7:30 PM, ZachSaucier said:

Hey Augusto and welcome to the GreenSock forums! 

 

Can you please recreate your issue in a CodePen? It's hard for us to help blind. There's nothing obviously wrong with your code that I can see.

See the Pen OJPNpad by gutobarroso (@gutobarroso) on CodePen

 

working fine on codepen, but at my code.

[ZachSaucier]

If it works fine on CodePen, then it's got to be something wrong in getting it into your project. Do you have any errors in the console?

[Augusto Barroso]

On 12/9/2019 at 7:30 PM, ZachSaucier said:

Hey Augusto and welcome to the GreenSock forums! 

 

Can you please recreate your issue in a CodePen? It's hard for us to help blind. There's nothing obviously wrong with your code that I can see.

 

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)
            })
        })

 

 

[Augusto Barroso]

Just now, Augusto Barroso said:

 

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)
            })
        })

 

 

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

[ZachSaucier]

That means that your target isn't selecting just the two elements that you're wanting. It's selecting all of them. So change vsOpts.$list to something specifically dealing with the elements that you want to affect. 

 

What to change it to is related to whatever pre-processor you're using, not GSAP.

[Augusto Barroso]

ok. I gonna try. Thank you.