Transition snapping onto last value instead of smoothly transitioning

[DeDX]

Here's the codesandbox: 
https://codesandbox.io/s/gsap-transition-snap-react-p421y5

I want the building to smoothly disappear when it hits the trigger point. Instead of animating, building just snaps to opacity: 0.

 

[GreenSock]

It looks like you're making one of the common mistakes - you're NESTING a ScrollTrigger inside tween that's inside a timeline. You can't have the ScrollTrigger and the timeline both fighting for control of the tweens playhead. See 

 

The solution: either put the ScrollTrigger on the timeline or don't even use a timeline at all and just use a standard tween: 

// BAD
scTl.current.to(el("#building"), {...

// GOOD
gsap.to(el("#building"), {...

Happy tweening!