Animation ending before all cards are animated

[raffi23]

Hey guys I am trying to create a scroll effect where scrolling would cause the cards to move down-left but my problem is that the animation is not ending where it should (where all cards have been shown).

 

I tried adding

 

{ end: "+=2000" }

 

but it is only making the animation slower.

 

Can you help me fix this bug?

See the Pen QWXLNpr by raffiwebdev (@raffiwebdev) on CodePen

[mvaneijgen]

Hi @raffi23 welcome to the forum!

 

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

Below your demo with ScrollTrigger disabled and  GSDevTools so we have a way to inspect the animation and as you can see your animation is not doing what you want, so your ScrollTrigger will never be able to fix your animation, it is just playing the animation you've build, but using the visitors scrollbar as the progress bar. 

 

See the Pen xxoKqVj?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

[raffi23]

Thank you that helped!