Leaderboard

Glad we got there in the end!

Thank you so much. I will look into this post.

Nothing has changed about how autoAlpha works. I noticed a few problems in your demo: Your "wrapper" variable was null. You called detail.querySelector(".splitScreenPinning__wrapper") - but that's actually an ancestor of the detail element, so querySelector() won't find it. I assume you meant to use closest()? Since your ScrollTrigger's trigger was null, it was defaulting to the viewport/body, and therefore your start: "top 80%" and end "top 50%" resulted in NEGATIVE start/end scroll positions, so your whole animation was FINISHED at the very top of the page, before scrolling. That's why autoAlpha: 0 was already set. I'm pretty sure you meant to set the trigger to the detail element. https://codepen.io/GreenSock/pen/NWmjJLm?editors=1010 Does that clear things up?

Alright, I couldn't help myself - I just had to find an algorithm to try to smooth out the movement when the path goes backwards. After about 10 hours, I think I've figured it out, and also demonstrated how you can make the bee kinda twist itself to remain oriented in the direction it's moving using scaleX and scaleY: https://codepen.io/GreenSock/pen/mdgmawg?editors=0010 Notice that pathEase() helper function has been updated and you can pass in a config object with smooth: true. I hope that helps!

@Cassie This looks like it made everything work... Now the triggers after the horizontal scroll trigger at the height it should. Thank you! ScrollTrigger.create({ refreshPriority: -1, // lower priority makes it happen later in the refresh() calculations ... });