Streaming live at 10am (PST)

Creating page transition effect onpage load, but absolute positioning pushes the transition div past the hero section


#1

Hello everyone,

I wouldn’t post if I haven’t asked high and low for the answer to this question in the community forums. I’m going to try to explain it as succinct and clearly as possible, so here goes: I’m trying to create a page transition effect, utilizing mainly this tutorial right here: [https://www.youtube.com/watch?v=kxhZNzYyXx0&t=552s]

Current state problem:
a) Whenever I create a div block with the background on absolute position, it pushes the div block past the hero section. So if a user scrolls down on the live site, they can see all the transition designs that I used. What’s weird is that I can only see this on my live website [www.vanessa.xyz], not on the Webflow preview. I’ve set all the transitions to absolute positioning with z-index high so that they can layer others
b) There are some weird design distortion on the images that I have used after page load. You can compare it with the live image to the images stored in Webflow to see the difference

Desired State:
a) My website should not be scrollable and
b) There should not be any weird design flaw on the transition

I hope I was able to explain it clearly! If not, feel free to ask so I can clarify.

I would really love to hear from the Webflow community. This is my first time writing, but I’ve been a lurker for quiet a while since I’m only starting out Webflow.


Here is my public share link: https://preview.webflow.com/preview/vanessag?utm_source=vanessag&preview=6fca2dd356c217981bd9209345efee28


#2

Have you tried setting the overflow on the hero section to “Hidden”. I set it to hidden and you can’t scroll past anymore. It’s important to do that if you are hiding certain elements.


#3

Ahhh! I didn’t think about overflow elements at all. That seemed to do the trick.

Thank you so much! :]


#4

Great! So glad to hear! Looks really cool, good luck with the rest of the build! :wink: