toby311

Thank you for the answer! It does help me achieving the effect I'm looking for

So I want to use ScrollTrigger to toogle pointerEvents of the elements whenever user scroll to a certain div block. In the codepen, when user scroll to red block, pointerEvents supposed to be auto, and at green block, it supposed to be none. What I tried is only work for onEnter and re-onEnter the block only. Im new to ScrollTrigger so could someone tell me how can I achieve this and is using ScrollTrigger the right approach?

I see! I test it again on Chrome and it works as expected! I develop the website on Opera and forgot to check again on another browser. Thanks for your help @akapowl Thanks to @PointC suggestion, I create a GSAP above the setTimeout to animate the first part and it works fine on both browser!

So I'm trying to create a page loader animation. The idea is the loader will run for at least 2 second + loading time, and at the beginning of the animation, the word is slide up to the middle of the screen, then wait until the page is completely loaded, then the word slide upward, out of the overflow: hidden parent div to invisible. I tried have the first part of animation in CSS, so it starts as soon as possible. And the second part in GSAP. However, the second part of animation doesn't run as expected, instead, it moves down by 100px, instead of translateY(-500px) inside GSAP code. What is the possible cause and solution for this problem?