let indexForElements = 0;
let totalValue = 411;
ScrollTrigger.create({
scroller: window.parent,
trigger: '.paragraph',
start: 0,
end: "bottom bottom",
scrub: 0.8,
fastScrollEnd: 1000,
animation:
gsap.to({}, {
duration: 1,
onUpdate() {
if(indexForElements < totalValue) {
document.querySelector('#text-highlight-section').contentWindow.document.body.querySelector('.paragraphElement' + indexForElements).style.color = "#0b41cd";
indexForElements++;
}
}
})
});
window.setTimeout(() => {
ScrollTrigger.refresh();
}, 200);
In the end I brute forced it, it's not a nice solution but it will work, If you have idea how to improve on it I am all ears(this is called from inside). Only question is now how to connect speed of animation with scroll speed. The only thing comes to mind is either scrolltrigger velocity. and then basing it on that but that introduces whole batch of new problems. Issue is gsap cannot access elements in iframe so only workaround is to point on them and change styles independently of gsap.
