Does gsap.to and scroll trigger have a stagger?

[momo12]

Hi,

 

I need a help. I have two elements with the same class-name which appears on scroll. I use scrolltrigger.batch but is there a way to use the normal scroll trigger and gsap.to / and inside gsap.to we set the stagger?

 

** The problem I have here is if we don't scroll all the way down to the bottom of our trigger (when it ends), the animation does make problems when we enterBack! The enter back won't work unless we scroll down first time and reach the end point.

 

** Another issue why the animation will be triggered without considering the scroll percentage? I mean I want to scale up the boxes according to the scroll position, not trigger the animation at once. In other words, the animation will run but I want it does a normal job if we scroll 50%, the boxes scale up 0.5 and if we scroll 100%, they reach 100% of their desired scale.

See the Pen PoeKrmo by talewoy290 (@talewoy290) on CodePen

[Rodrigo]

Hi,

 

I encourage you to go through the documentation of Scroll Trigger, since all you issues are actually mentioned and explained there:

 

13 hours ago, momo12 said:

** The problem I have here is if we don't scroll all the way down to the bottom of our trigger (when it ends), the animation does make problems when we enterBack! The enter back won't work unless we scroll down first time and reach the end point.

👆That is exactly what the enter back does, is intended to work like that. It means that the scroll trigger end point has passed and now is being scrolled back, as the user scrolls back up.

 

13 hours ago, momo12 said:

** Another issue why the animation will be triggered without considering the scroll percentage? I mean I want to scale up the boxes according to the scroll position, not trigger the animation at once. In other words, the animation will run but I want it does a normal job if we scroll 50%, the boxes scale up 0.5 and if we scroll 100%, they reach 100% of their desired scale.

👆This is what scrub is for.

 

Hopefully this is helps:

gsap.registerPlugin(ScrollTrigger);
gsap.set('.img', {scale: 0});
gsap.to(".img", {
  scale: 1,
  stagger: 0.15,
  scrollTrigger: {
    trigger: ".section-2",
    start: "top top",
    end: "center 20%",
    scrub: true,
  }
});

See the Pen XWqeNxN by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!!!

[momo12]

1 hour ago, Rodrigo said:

Hi,

 

I encourage you to go through the documentation of Scroll Trigger, since all you issues are actually mentioned and explained there:

 

👆That is exactly what the enter back does, is intended to work like that. It means that the scroll trigger end point has passed and now is being scrolled back, as the user scrolls back up.

 

👆This is what scrub is for.

 

Hopefully this is helps:

gsap.registerPlugin(ScrollTrigger);
gsap.set('.img', {scale: 0});
gsap.to(".img", {
  scale: 1,
  stagger: 0.15,
  scrollTrigger: {
    trigger: ".section-2",
    start: "top top",
    end: "center 20%",
    scrub: true,
  }
});

 

 

 

Happy Tweening!!!

Thanks man. I got confused yesterday. With your example I understand this better! Thanks a lot