@Rodrigo - as mentioned before. Your demo seems to break the synchronization. text section1 and video num1 should be synced together, 2-2, 3-3, etc.
I understand my code isn't the cleanest it could be, but my main issue was getting these sections to synchronize while having different animations. I had to revert back to my original code because yours was not achieving this.
Like I said, the trick with onLeaveBack and onLeave works great for the videos, however! If there's a way to achieve this with the text it would be wonderful. Thank you for your time.
Edit: The sync issue is within your Codepen as well, upon a second look. I can't quite figure out how to sync them when forking yours. It becomes even more apparent if you edit the settings for the text transitions to be more fluid and closer to my original animations. I am sure I am missing something simple here!
d1sections.forEach((section, i) => {
const previous = d1sections[i - 1];
if (previous) {
tl.from(
section,
{ y: 700, opacity: 0
},
"+=1.5"
).to(
previous,
{ y: -20, opacity: 0
},
"<"
);
}
});