How to add SplitText to Slider

[Nikhil009]

Hi,

I have made a vertical slider with text, i want to add in the SplitText plugin that i have added but doesn't seem to work it on the code.

I have added the codepen below.
Can anyone help to see where i am going wrong. 
Thank you very much

See the Pen jOqGedJ by nikhil-ladhani-nl (@nikhil-ladhani-nl) on CodePen

[Ihatetomatoes]

Hi @Nikhil009, if you look in the developer tools you will see that the text is split.

 

 

I just don't see any tween that would animate the text. In other words, SplitText plugin works.

 

Add animation to your words and you are good to go.

[Nikhil009]

Hello,

Thank you, yepp i am able to see that mainly but chars = splitText.lines; I wanna use the chars as the variable instead of the $slides.  Whereby 

 

var $slides = $slider.find(".slider-item");

var $prevSlide = $slides.eq(prevSlideID);
var $currentSlide = $slides.eq(currentSlideID);
TweenMax.to($prevSlide, time, {
        top: "-100%"
      });
If you see the code above the tween is occurring on the word but as the whole item not the specific line like the on you showed me on developer tools,
and if is replace the $slide with chars the .eq function does not work, because i want to add staggering on the text as well

Any chance you might be knowing how handle this

 

[ZachSaucier]

Hey Nikhil. I'm not sure I understand the issue here. 

 

I highly recommend reading the SplitText documentation as it explains more fully how to use it. We also recommend using the GSAP 3 syntax which you can learn how to convert to in the GSAP 3 migration guide.

 

How about you read through both of the above, make improvements to your demo, then try to clearly explain the issue that you're facing again?

[Nikhil009]

Hey Zach,

 I have read the documents and man I am working on old ones since long,

Thank you very much for showing me De Way

With that I have made improvement in my code as well as changed it to make it simpler and voila it is working as expected.
Below is the code pen if you any of you want to have a look and see the results. 

The only thing i am trying to figure out is that jquery does not convert the css- transform: translate(100%) as it is, but it converts to pixels but all is good.

Thank you very very much.

See the Pen mdPqWjy by nikhil-ladhani-nl (@nikhil-ladhani-nl) on CodePen