Streaming live at 10am (PST)

Page Load Transition Help


#1

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


#2

@roblewi5 you need to double check your interactions


#3

@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


#4

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


#5

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


#6

Anyone available to help with this please?

@Waldo @PixelGeek

Rob


#7

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:


#8

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


#9

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:


#10

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


#11

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,


#12

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


#13

Great stuff! :blush:


#14

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


#15

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


#16

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.


#17

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

the email is: hello@twoupdigital.com

Rob


#18

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


#19

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:


#20

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

Rob