GSAP animation on scroll

[LitRoman]

Hello.

I have just started to learn gsap. Trying to animate some elements on scroll now.

The code below is an example of my animation for text titles. There are 5 titles, and I want them to replace each other on scroll. The problem is that I have to scroll few times (more then just one scroll) to replace each title with another. 

 

Could you please help me to make it replace each other with each scroll?

gsap.registerPlugin(ScrollTrigger);

const titles = gsap.utils.toArray(".features__block__title");
const firstTitle = gsap.utils.toArray(".features__block__title-first");
const lastTitle = gsap.utils.toArray('.features__block__title-last');

ScrollTrigger.defaults({
  toggleActions: "restart pause resume pause",
});

const titlesLine = gsap.timeline({
  scrollTrigger: {
    id: "CONTAINER",
    trigger: ".features",
    scrub: true,
    start: "center center",
    end: "+=200%",
    pin: true,
  }
});

let stagger = 1 ;

animationFromRight(titlesLine, titles, firstTitle, lastTitle);

function animationFromRight(timeline, selector, firstSelector, lastSelector) {
  timeline
    .to(firstSelector, {
      opacity: 0,
      delay: 1,
    });

  timeline
    .from(selector, {
      opacity: 0,
      stagger:stagger,
      x: 250, 
    })
    .to(selector, {
      opacity: 0,
      delay: 1.5, 
      stagger:stagger,
    }, stagger)

  timeline
    .from(lastSelector, {
      opacity: 0, 
      delay: 1,
      x: 250, 
    }, 3.5)
}

 

 

[OSUblake]

Hi LitRoman!

 

Do you think you can put that a minimal demo? It's hard to understand what's going on from code snippets.

 

A scrub animation is going to go for the entire distance of trigger. If you want to run faster, you would need to make the end shorter or add some dummy tweens to your timeline to make the duration longer.

 

timeline.to({}, {
  duration: 4
})