SplitText not animating with scrolltrigger

[Akash Ranjan]

Hi,

 

I am trying to animate multiple split text animations in a timeline with scrollTrigger. But it is not working as expected. The text appears instantly without animating.

 

The animation works fine when adding scrub property though.

 

Please help me.

 

Thanks

See the Pen NWOaPeG by akashrwx (@akashrwx) on CodePen

[Cassie]

Heya!

You're nesting ScrollTriggers - easily done, it's one of the most common ScrollTrigger mistakes.

 

// you can add to a timeline
var words1 = gsap.timeline({
  scrollTrigger: {
    trigger: ".main-animation-div",
    markers: true,
    start: "100px 30%",
    end: "250px 25%"
  }
});

words1.fromTo(
  weakRouterWordsOne,
  {
    autoAlpha: 0,
    y: 90
  },
  {
    duration: 0.5,
    autoAlpha: 1,
    y: 0,
    ease: "power2.out",
    stagger: 0.1
  }
);
words1.fromTo(
  weakRouterWordsOne,
  {
    opacity: 1,
    y: 0
  },
  {
    duration: 0.5,
    opacity: 0,
    y: -90,
    ease: "power2.out",
    stagger: 0.1
  }
);

// or to a tween
gsap.to(weakRouterWordsThree,{
  autoAlpha: 0,
  y: 90,
  scrollTrigger: {
   trigger: ".main-animation-div",
   markers: true,
   start: "100px 30%",
   end: "250px 25%"
  }
});

// but not tweens inside timelines

weakRouterTl.fromTo(
        weakRouterWordsOne,
        {
          autoAlpha: 0,
          y: 90,
        },
        {
          duration: 0.5,
          autoAlpha: 1,
          y: 0,
          ease: 'power2.out',
          stagger: 0.1,
          scrollTrigger: {
            trigger: '.main-animation-div',
            // markers: true,
            start: '100px 30%',
            end: '250px 25%',
          },
        }
       
      )
      .fromTo(
        weakRouterWordsOne,
        {
          opacity: 1,
          y: 0,
        },
        {
          duration: 0.5,
          opacity: 0,
          y: -90,
          ease: 'power2.out',
          stagger: 0.1,
          scrollTrigger: {
           trigger: '.main-animation-div',
            // markers: true,
            start: '15% 30%',
            end: '18% 25%',
          },
        }
      )

 

[Akash Ranjan]

Hi @Cassie,

 

Thanks alot for pointing out the issue. I have update all of them to a fromTo tween and added toggle actions so that they play again when entering back. Do you have any suggestions how I can improve this?

gsap.fromTo(
      weakRouterWordsTwo,
      {
        autoAlpha: 0,
        y: 90,
      },
      {
        duration: 0.5,
        autoAlpha: 1,
        y: 0,
        ease: 'power2.out',
        stagger: 0.1,
        scrollTrigger: {
          trigger: weakRouterSection.current,
          // markers: true,
          start: '18% 30%',
          end: '25% 25%',
          toggleActions: 'play none reverse none',
        },
      }
    )
    gsap.fromTo(
      weakRouterWordsTwo,
      {
        opacity: 1,
        y: 0,
      },
      {
        duration: 0.5,
        opacity: 0,
        y: -90,
        ease: 'power2.out',
        stagger: 0.1,
        scrollTrigger: {
          trigger: weakRouterSection.current,
          // markers: true,
          start: '40% 30%',
          end: '45% 25%',
          toggleActions: 'play none reverse none',
        },
      }
    )

 

[Cassie]

You might not need fromTo tweens, you may be able to use just 'from' or just 'to' - hard to say without seeing it working in a demo though.

Is it working for you now?

[Akash Ranjan]

Yes it is working but partially.  I have updated the same codepen. The issue is I am using 2 fromTo tween on same element. One for making it appear and another for making it disappear after a while.

 

But the problem is that the text is visible on first scroll which I don't want.

[Cassie]

Yep, so that's because you have two conflicting 'from' values. from tweens and ScrollTriggers are immediately rendered at their start position, so when you have one tween that's saying "start from 0 opacity" and another later one saying "start from 1 opacity" there's a conflict and the later one is going to win. 

You could do something like this with one 'from' tween and one 'to' tween and immediate render false on the second one. This is probably the best route if you're using toggleActions so that you can define individual durations and eases for the animations

See the Pen abRLKbY?editors=1010 by GreenSock (@GreenSock) on CodePen

If you're scrubbing, you could just go for a timeline though - 

See the Pen OJBxEyP?editors=1010 by GreenSock (@GreenSock) on CodePen

[Akash Ranjan]

Thanks alot @Cassie for the help. I used timeline and it is working fine. You are awesome