Why the my hide animation don't work after getting the equal height and width in gsap and scrollTrigger.

[Xenex122]

So basically my animation is something like this..When the both image get the max width and height the text that is hidden as you see in the codepen. It must go down as the code says " y : 0 "...but I don't know why it isn't working but when I tried to inspect it..It is working but when you not inspect it..It will not animated to "y:0". Any idea? 
 

window.addEventListener("scroll",function e(s) {
    const box = document.querySelector('.box').getBoundingClientRect()
    if ((box.width == ((window.innerWidth/2))) && (box.height == (window.innerHeight))) {
        console.log("Pass In")
        gsap.to('.hide h3',{
            y:0,
            ease:"none",
        },3)
    }
})

 

See the Pen mdXwPGP by myth-vince (@myth-vince) on CodePen

[Cassie]

Hey there.

 

Not sure about this approach - maybe you have your reasons and I'm not understanding, but if you're using scrollTrigger there shouldn't be any need to listen to the scroll event anymore and write custom JS logic like this.

If I'm understanding the goal - maybe just use a timeline?

See the Pen MWQoboQ?editors=0010 by GreenSock (@GreenSock) on CodePen

[Xenex122]

@Cassie I don't see animation in your codepen ".hide h3" that it should be y:"0" it stays the same in  transform: translateY(-50%)... is it animating on you? cause it is not animating on me sorry. 

[GreenSock]

If I understand correctly, that's because you're animating "y" instead of "yPercent".