Scroll to the top every time I refresh the page

[narasoska]

I'm new to gsap, if I wrote proper code, I apologize in advance for confusing you. Somehow I managed to make the circle disappear as I scrolled.
What I want to do now is to make the scroll appear at the top when I refresh the page. Thanks in advance

And if you have time, I have another question:
Whenever I reduce the size of the page the circle becomes distorted and does not behave as it should. I wonder what's the reason for this?

See the Pen LYaLmVV by kaan-korkmaz-the-selector (@kaan-korkmaz-the-selector) on CodePen

[GreenSock]

Welcome to the forums, @narasoska

 

I noticed a few things: 

1. You forgot to load ScrollToPlugin, so your scrollTo: 0 tween won't work. You don't even really need it because all you need to do is set window.scrollTo(0, 0). 
2. It's always best to use the independent transform component properties like x, y, xPercent, yPercent, scaleX, scaleY, rotation, etc. instead of transform. So instead of transform: "translate(-50%, -50%)" it should be xPercent: -50, yPercent: -50. Always set the transform-related properties directly through GSAP to ensure maximum performance and reliability. 
3. If you want the animation values to get refreshed when the window resizes, set invalidateOnRefresh: true on your ScrollTrigger. 
4. You've got some logic problems because on every "resize" event, you're setting the dimensions of the .container_page_two element to be much larger and at the SAME TIME you've got the scrubbed ScrollTrigger-based tween trying to affect the same values (conflicting). 
5. There's really no need to have your own "resize" event handler like that. It'll actually hurt performance a bit. ScrollTrigger automatically debounces its refresh() call so that it'll wait until 200ms elapses since the last time a "resize" event was dispatched before doing all the refresh work. 
6. You can either have a scrub on the ScrollTrigger -or- toggleActions. It's logically impossible to have both. So I deleted the toggleActions

So your demo could be simplified to this: 

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

 

Better? 

[narasoska]

Thank you very much, it works perfectly. But when I got the result, I realized that what I really wanted was clipping.that is,I want the elements inside to not change their positions as I grow. Are there any resources you can recommend for this?

[GreenSock]

Oh, that's an entirely different thing. Hopefully others can chime in with demos they've seen  around here - I don't have time right now to dig but this article might help you: 

https://css-tricks.com/clipping-masking-css/

 

See the Pen zYbYjBo by GreenSock (@GreenSock) on CodePen

[narasoska]

thank u so much, that what m looking for