Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Nikhil009

How to add SplitText to Slider

Recommended Posts

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

Link to comment
Share on other sites

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

 

image.png.73f9984378db5209efb750b0254ae888.png

 

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.

  • Like 4
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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?

  • Like 1
Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×