How do you work on elements after an animation has taken place?

I’m trying to mimic the animation from this web design: Fashion Photography Colour Slider by Tom Anderson for green chameleon on Dribbble

So I have a timed animation that happens after the home page has loaded (3s animation with 3 second delay), that slides the main section out of view to the right and changes the background color.

My question is how do I work on the body element AFTER the animation has occurred. Essentially, it’s a new state and I would like to slide up a new main section. Basically, I want this new main section to be out of view, and after the 6s animation, slide into view. I don’t want the user to be able to see the new section with scrolling (in fact, is there a way to not allow scrolling at all on the home page?)

Here is my public share link: https://preview.webflow.com/preview/kaylabutaineh?utm_medium=preview_link&utm_source=dashboard&utm_content=kaylabutaineh&preview=c1c29aa4c86dde07edf492b33955a5a8&mode=preview
(how to access public share link)