I have an array that changes as the page scrolls in order of svg shapes, I need the first shape to be displayed on page load. Therefore, I entered the first path d manually and statically.
When I scroll to the end of the page and then go back to the beginning, it does not display the first page. Therefore, I returned the first shape to the array, but now the first shape is displayed twice in a row, and I want each one to be displayed only once.
I read the DOC, but I didn't get anything, maybe I didn't read it correctly
for(let i = 0 ; i < heroSlides.length ; i++){
tl.to("#Tear",{
delay: 0.3,
duration: 0.5,
attr:{d:heroSlides[i].path,}})
.to("#rect",{attr:{style:`fill:${heroSlides[i].fill}`},
delay:0.75,
},"-=0.3")
.call(changeBoxes, [i],"-=0.4");
}
const scroll = ScrollTrigger.create({
trigger: ".module",
pin: true,
scrub: true,
start: 'top top',
end: "max",
animation: tl,
// markers: true,
pinReparent: true,
fastScrollEnd: false,
});
scroll.scroll();