Revealing w/ stagger chars GSAP Scrolltrigger

[oligsap]

Hello there,

 

I'm trying to animate the letters of a sentence. Letters need to appear when its right bound hits the right bound of my viewport (= when the letter enters the viewport). 

 

I'm almost there but I seem to be missing something. I'm using the containerAnimation parameter but maybe it's not the right thing to do here.

 

Anyway I'm opened to suggestions, thanks for your help folks

 

Olivier

See the Pen poxKKdq by olig (@olig) on CodePen.

[Rodrigo]

Hi,

 

The issue was here:

const scroller = gsap.to(this.intro, {
  x: () =>
  window.innerWidth - this.intro.clientWidth - introBounds.left * 2,
  scrollTrigger: {
    trigger: "body",
    start: "top top",
    end: "bottom-=200 bottom",
    scrub: true,
    invalidateOnRefresh: true
  }
});

This is your scroller animation and the horizontal animation has the default easing which is power1.out, so that will slow down the animation at the end, but it won't slow down the scrolling, so it appears to be some space as you scroll down and the text moves to the left. That's just the easing function. When using ScrollTrigger to create some sort of horizontal animation it's always a good idea to start with no easing function (ease: "none") and then try a specific one if you need/want it.

 

This seems to work the way you expect:

const scroller = gsap.to(this.intro, {
  x: () =>
  window.innerWidth - this.intro.clientWidth - introBounds.left * 2,
  ease: "none",
  scrollTrigger: {
    trigger: "body",
    start: "top top",
    end: "bottom-=200 bottom",
    scrub: true,
    invalidateOnRefresh: true
  }
});

Finally there is no need to run all the extra code in order to determinate whether or not a character is in the screen, ScrollTrigger will animate that for you if they are on the screen. So this:

this.introObj.chars.forEach((letter) => {
  gsap.to(letter, {
    y: 0,
    autoAlpha: 1,
    scrollTrigger: {
      trigger: letter,
      start: "right right",
      containerAnimation: scroller,
      invalidateOnRefresh: true,
      toggleActions: "play none none reverse",
      markers: true
    }
  });
});

Has the same effect as this:

lettersToAnimate.forEach((letter) => {
  gsap.to(letter, {
    y: 0,
    autoAlpha: 1,
    scrollTrigger: {
      trigger: letter,
      start: "right right",
      containerAnimation: scroller,
      invalidateOnRefresh: true,
      toggleActions: "play none none reverse",
      markers: true
    }
  });
});

Hopefully this helps.

Happy Tweening!
   

[oligsap]

Thanks a lot @Rodrigo this solved my problem !