[Scrolltrigger + timeline is causing staggered/one-by-one animations]

It seems i was missing the timing function at the very end:
Old Code:

tl.fromTo(parallaxImage7.current, {
  filter: 'blur(12px)',
  y: '100%'
}, {
  filter: 'blur(0px)',
  y: '-100%'
});

New Code:

tl.fromTo(parallaxImage7.current, {
  filter: 'blur(12px)',
  y: '100%'
}, {
  filter: 'blur(0px)',
  y: '-100%'
}, 0);

 

[Scrolltrigger + timeline is causing staggered/one-by-one animations]

When creating a timeline for parallax images on scroll, my images only animate on-by-one rather than all at the same time.

This is my code:

    useLayoutEffect(() => {
        const ctx = gsap.context(() => {
            const tl = gsap.timeline({
                scrollTrigger: {
                    pin: true,
                    trigger: main.current,
                    start: 'bottom bottom',
                    end: 'bottom top',
                    scrub: 1,
                    markers: true
                }
            });

            tl.fromTo(parallaxImage1.current, {
                filter: 'blur(12px)',
                y: '100%'
            }, {
                filter: 'blur(0px)',
                y: '-100%'
            });

            tl.fromTo(parallaxImage2.current, {
                filter: 'blur(12px)',
                y: '100%'
            }, {
                filter: 'blur(0px)',
                y: '-100%'
            });

            tl.fromTo(parallaxImage3.current, {
                filter: 'blur(12px)',
                y: '100%'
            }, {
                filter: 'blur(0px)',
                y: '-100%'
            });

            tl.fromTo(parallaxImage4.current, {
                filter: 'blur(12px)',
                y: '100%'
            }, {
                filter: 'blur(0px)',
                y: '-100%'
            });

            tl.fromTo(parallaxImage5.current, {
                filter: 'blur(12px)',
                y: '100%'
            }, {
                filter: 'blur(0px)',
                y: '-100%'
            });

            tl.fromTo(parallaxImage6.current, {
                filter: 'blur(12px)',
                y: '100%'
            }, {
                filter: 'blur(0px)',
                y: '-100%'
            });

            tl.fromTo(parallaxImage7.current, {
                filter: 'blur(12px)',
                y: '100%'
            }, {
                filter: 'blur(0px)',
                y: '-100%'
            });
        }, main);

        return () => ctx.revert();
    }, []);

What am I doing wrong?