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?