splitText implementation

[ansuft]

Hi, I have this part of a slide code: 

    

  function nextSlide(pageNumber) {
    const nextPage = pages[pageNumber];
    const currentPage = pages[current];
    const nextText = nextPage.querySelector("h1");

    const tl = new TimelineMax({
      onStart: function() {
        slides.forEach(slide => {
          slide.style.pointerEvents = "none";
        });
      },
      onComplete: function() {
        slides.forEach(slide => {
          slide.style.pointerEvents = "all";
        });
      }
    });

    tl.fromTo(
        currentPage,
        0.3,
        { opacity: 1, pointerEvents: "all" },
        { opacity: 0, pointerEvents: "none" }
      )
      .fromTo(
        nextPage,
        0.3,
        { opacity: 0, pointerEvents: "none" },
        { opacity: 1, pointerEvents: "all" },
        "-=0.6"
      )
     fromTo(nextText, 0.3, { opacity: 0, y: 0 }, { opacity: 1, y: 0 });

      current = pageNumber;
  }

 

And I don't know how to implement a splitText in 'h1' (nexText) like here:

In particular, I don't know how to make these two parts combine:

const nextText = nextPage.querySelector ("h1");
and
var mySplitText = new SplitText ("# quote", {type: "chars, words, lines"})

See the Pen aVJRBg by GreenSock (@GreenSock) on CodePen

[GreenSock]

6 hours ago, vidi45 said:

I don't know how to make these two parts combine:

const nextText = nextPage.querySelector ("h1");
and
var mySplitText = new SplitText ("# quote", {type: "chars, words, lines"})

I'm not sure I understand your question, but I assume you wanted something like this?: 

 

var mySplitText = SplitText.create(nextPage.querySelector("h1"), {type: "chars, words, lines"});

?

 

If you still need some help, it'd be best to provide a reduced test case in a codepen or something so that we can see the issue in context. 

 

Happy tweening!

[ansuft]

It does not work for me. 

Here is my slide.  I can't make the (.destails h1) splitText

See the Pen GRgLZom by df4fgg (@df4fgg) on CodePen

 

 

[ZachSaucier]

2 hours ago, vidi45 said:

It does not work for me. 

Here is my slide.  I can't make the (.destails h1) splitText

The first thing you need to do is split the text on load: 

pages.forEach((page, index) => {
  page.splitText = new SplitText (page.querySelector("h1"), {type: "chars, words"});
});

Then inside of the nextSlide function you just need to animate the split text however you want to. For example you could add something like this to the timeline:

.staggerFrom(nextPage.splitText.chars, 0.3, {y:20, opacity:0, stagger: 0.04})

We highly recommend switching over to GSAP 3 - it has a smaller file size, improved API, and a bunch of new features! 

See the Pen zYxXoGQ?editors=0010 by GreenSock (@GreenSock) on CodePen

[ansuft]

Where specifically is it 'on load'? in the init function?
I put it and it doesn't work even the slide

Do I have to remove this?
const nextText = nextPage.querySelector (". details h1");

.fromTo (nextText, 0.3, {opacity: 0, y: 0}, {opacity: 1, y: 0}

See the Pen GRgLZom by df4fgg (@df4fgg) on CodePen

[ZachSaucier]

11 minutes ago, vidi45 said:

Where specifically is it 'on load'? in the init function?

Yep.

 

11 minutes ago, vidi45 said:

I put it and it doesn't work even the slide

If you look in your dev tool's console, you will see an error: "SplitText is not defined". You must load SplitText. 

 

11 minutes ago, vidi45 said:

Do I have to remove this?
const nextText = nextPage.querySelector (". details h1");

.fromTo (nextText, 0.3, {opacity: 0, y: 0}, {opacity: 1, y: 0}

Nope.

[ansuft]

Thanks, it works correctly. Is it possible that the effect is also done when leaving? Don't let me combine staggerTo and staggerFrom

[ZachSaucier]

Yep!

tl.staggerFromTo(currentPage.splitText.chars, 1, {y: 0, opacity:1}, {y: 100, opacity:0, stagger: 0.04})

Again, we highly recommend switching over to GSAP 3 - it has a smaller file size, improved API, and a bunch of new features!