Page Load Transition Help

Hello

I am following this tutorial: https://webflow.com/blog/how-to-build-page-transitions-in-webflow

For some reason the Page Load animation isn’t working. Can’t for the life of me figure out why. Please can someone take a look?

Live site:
http://monikh.webflow.io/

Share link below.

Thanks

Rob


Here is my site Read-Only: LINK

@roblewi5 you need to double check your interactions

@roblewi5 I have looked over your project and you didnt follow it exactly for one your display on your overlay block is set to display none from the start and your interactions are not matching those of the tutorial

Hi @Poliigon
Thanks for taking a look.
The tutorial says to hide the overlay. Then the animation will display it before sliding into view.
I also don’t want to match the tutorial exactly, i’d prefer just one slide in. It shouldn’t mean it shouldn’t be working. There must be something wrong along the way.

Rob

Hi @Aaron,

I’ve followed your tutorial here: https://webflow.com/blog/how-to-build-page-transitions-in-webflow

What I want to achieve is the overlay to slide in from the right to cover the viewport. And as the user leaves the page onLoad i want the overlay to slide out to the right. I can’t understand why this doesn’t happen. It works in Live interaction but not when published.

Share link: https://preview.webflow.com/preview/monikh?preview=6863ec590a693057a1f7018ea9ea345b

Any help would be appreciated.

Thanks

Rob

Anyone available to help with this please?

@Waldo @PixelGeek

Rob

Hey @roblewi5 I just took a look at your build, it’s difficult for me to see what not working as I can’t publish to test, if you’d like you can send me a copy of your build and I can have a tinker?

Oh, and sorry for the super late reply! Super busy! :confused:

But always happy to help :slight_smile:

Hi @Aaron,

That’s cool. Thanks, I would like to understand why it’s not working to help going forward. How do I send a copy of my build?

Rob

Hey,

If you go to your project settings and create a duplicate, then go to the project settings of your newsly duplicated project, in there you will see in the top part, a button called transfer send it to "aaron@aarongrieve.co.uk" I’ll happily take a look :slight_smile:

Hi @Aaron,

I am on the Lite plan which we’ve paid for a year which means I cannot transfer. How do I get round this?
Will i be able to upgrade for a month to transfer then revert back after?

FYI - it’s on my work’s account ‘roblewis2up’

Rob

Hi @roblewi5

Again late reply! Sorry!

You can sign up for a pro account for just the month, send a copy my way — once I have a solution I can send it back, you can then implement it in your proper build :slight_smile:

All the best, Aaron,

Hi Aaron,

I asked for one transfer via support as someone contacted me to say they will do this. If they take any longer to respond i’ll just do as you said.

Rob

Great stuff! :blush:

1 Like

Hi @Aaron,

The site has been transferred to you. Let me know if any problems.

Hope you understand what I was trying to achieve. Thanks for your offer to help i’ll be about to answer any questions.

Rob

1 Like

Hey mate, sorry for the delay, I’m looking at this now :slight_smile:

Ok @roblewi5 I figured it out :slight_smile:

There was a conflict with the starting point of the (onClick) of the about button and the final destination of the “Page Loading” animation — can you send me the email address linked with your Webflow account and I’ll send it back to you?

Check it here: http://monikh-06edfe7e3fc48abe565318e8fb72ff86.webflow.io/

Speak soon, Aaron.

1 Like

You’re the man. Thanks for helping. I’ll take a look in greater detail.

the email is: hello@twoupdigital.com

Rob

Hi @Aaron,

Thanks for sending back and for fixing the animation.

When you say a conflict, what specifically was conflicting? I can’t work out what it was. The blue buttons use the same animation for the Overlay, as does the onLoad.

Rob

Hey mate, the only change I made after inspection was making sure that the page button didn’t have the initial animations set to “Set as initial state” it was this that was in conflict with the page load animation and the firing of page transition button :slight_smile:

1 Like

Ahhh I see. Got it. Thanks so much for your time to help with this.

Rob