Hi Zach Saucier,
I'm working on a project where I have a series of sections (e.g., "rooms" like your example) that I navigate through by scrolling. My goal is to add animations to elements within these sections that not only animate in as I scroll down to them but also perform a reverse animation as I'm about to leave the section to move on to the next one.
Here's the desired user experience:
I load the page, and the text in the first section animates in.
As I start scrolling down towards the second section, I want the text in the first section to perform an exit animation before the page actually moves to the next section.
Upon entering the second section, the text there animates in, and the process repeats for each subsequent section.
Is this achievable using ScrollTrigger? I'm looking for a way to trigger the exit animation of the current section's elements before scrolling into the next section, essentially giving control over the transition between sections. I'm using this code of yours as a start.
Any guidance or examples on how to implement this would be greatly appreciated.
Thank you in advance for your help!