Jump to content
Search Community

How to add SplitText to Slider

Nikhil009 test
Moderator Tag

Recommended Posts

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.
×
×
  • Create New...