[SplitText responsive - howto revert()?]

8 minutes ago, Carl said:

Also for the mods: in this case is there any advantage or disadvantage to using batch over just looping through the lines and creating a load of ScrollTriggers? 

Thanks Carl, for the great help! 

I would not have come up with the solution myself. Works very well - I am of course very curious if the mods find something else. 

However, I get along very well with this. Thanks!

[SplitText responsive - howto revert()?]

Hi,

I am glad to ask my first question here in the fantastic forum
In my first CodePen I try to make this split text animation responsive.

 

    const animateLines = new SplitText(".is-style-animate-lines", {type: "lines"});

    gsap.set(animateLines.lines, {opacity: 0});

    ScrollTrigger.batch(animateLines.lines, {
      onEnter: batch => {
        gsap.set(batch, {opacity: 1, yPercent: 100});
        gsap.to(batch, {
          yPercent: 0,
          duration: 0.4,
          stagger: 0.2
        });
      },
      onLeaveBack: batch => gsap.to(batch, {opacity: 0, yPercent: 100}),
      start: "bottom 94%",
    });

 

I had other approaches first, but came across ScrollTrigger Batch here, which is what I would like to use to animate all H1 that enter the viewport.

However, my problem is that the text is not responsive and I just can't get it to return to the origin with revert().  I guess this happens at the resize event? Or when the animation has finished running?

Maybe someone can give me a tip?

 

Many thanks
Patrick

 

...my next question might be how to avoid the FOUC

 

 

See the Pen OJzQRBP by uploaded (@uploaded) on CodePen