Hello everybody,
I came across an issue, where inserting tweens or timeline in the master timeline results in totally wrong animation on some elements.
As you can see in the video attachments, buttons are animated properly, but the text just changes state from -300 to 0 without any animation.
I've tried multiple variation of the code below, and it only works when I assign animation to gsap, not to timeline.
Is this some sort of bug, or I've just overlooked something?
Thanks a lot!
P.S. The code below is simplified as there should be different values for each selectorsArray, so that's why I am wrapping it up with first for..of instead of using gsap.utils.toArray(selectorsArray) directly.
// V1
window.addEventListener("load", (e) => {
const selectorsArray = [".ct-text-block", ".c-btn-main"];
const masterTimeline = gsap.timeline();
const x = (item) => {
return {
trigger: item,
endTrigger: item,
start: "top+=0% 85%",
end: "bottom+=0% 15%",
};
};
for (const s of selectorsArray) {
for (const item of gsap.utils.toArray(s)) {
masterTimeline.from(item, { x: -300, duration: 1, scrollTrigger: x(item) }, 0);
}
}
});
// V2
window.addEventListener("load", (e) => {
const selectorsArray = [".ct-text-block", ".c-btn-main"];
const masterTimeline = gsap.timeline();
const x = (item) => {
return {
trigger: item,
endTrigger: item,
start: "top+=0% 85%",
end: "bottom+=0% 15%",
};
};
for (const s of selectorsArray) {
for (const item of gsap.utils.toArray(s)) {
const timeline = gsap.timeline({ scrollTrigger: x(item) });
timeline.fromTo(item, { x: -300, duration: 1 }, { x: 0 }, 0);
masterTimeline.add(timeline);
}
}
});
gsap.mov