Have you looked at the ScrollTrigger video? If you skip to section 3 (at the 2:50 mark), it talks about toggleActions and how to trigger an animation when an element enters the viewport. Then section 4 (at the 5:10 mark) talks about the start attribute, I think the problem is that you're using "top center", which waits until the image reaches the center before starting the animation. You probably should be using "top bottom".
