Toggle element on a certain scroll position

I want to have a fixed-position subscription form on my blog page. The form is ready but I want it to be shown when user scrolls to 25% of the height and hidden again when user reaches to 80% of the height.

I have done it via page interactions-while page is scrolling and added a move animation. But the problem is, element constantly moves during the scroll like a parallax effect. It starts to being shown on %0 until it reaches to 25% completly shown. And then starts to be hidden slowly when user passes 80% until the end of the page.

I want my element to be shown with an entrance animation on 25% level and to be hidden on 80% level. It should be like one time reveal toggle. Is there a way to do it?


To understand better the project would need to have the preview mode, if you want to have a free consultation, contact me via LinkedIn or Email.