Jump to content
Search Community

Revealing w/ stagger chars GSAP Scrolltrigger

oligsap test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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!
   

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...

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...