On Page Load - transition not working

Design help Animations & Interactions
1

Hey,

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

I can’t for the life of me work out why when I click on the links that its associated with that the Page Load Animation doesn’t work as it should (not at all usually)!

From the home page - click RÉSUMÉ in the top right and the animation should start to take you to my CV page.

From the RÉSUMÉ page click home and the same animation should take you back to the home screen.

The Page Out transition works, but it’s when the new page is loading the animation doesn’t trigger.

if anyone can tell me what I’m missing I’d be so grateful!!!

Website - Domain 1 - Website Link // Domain 2 - Website Link
Here is my public share link: My Portfolio Website

2

Hey @thomass96, try moving your page load animation to When page finishes loading instead of When page starts loading. Should work!

Cheers!

3

Hey @dennyhartanto,

Tried your suggestion and sadly that doesnt work neither.

When I create a random blank page, the animation works fine. For some reason it just doesnt work on my home page or my resume page… but all the settings and animation are exactly the same :man_facepalming:

4

Scrap that… it doesnt even work on any page I create…

But does work on the webflow 404 page?!

1 Like
5

I have this custom code embedded to all my pages footer -

and then to link to the pages I am using the following in the link -

for the home page - `javascript:delay(‘/’)

and

for the resume page - `javascript:delay(‘resume’)

Even when I remove this and put the usual webflow linking it doesnt work either…

1 Like
6

This is really odd. I tried to move the animation to When page starts loading and it works.

By “work”, I mean when I preview the animation starts which is usually a good sign.

2 Likes
7

Frustrating right!

So I just republished and the Resume button now points to the test page with the method you suggested and it works perfectly.

But for some reason the animation just isn’t working on the home or resume page…

I do see sometimes when it loads the green flash as if it did it but got stuck and jumped… but usually it just doesnt show.

8

I just hid all the other elements on the screen to make sure it wasn’t being overlayed by something, but nope… it just blips super fast

1 Like
9

This link seems to work fine https://www.thomasmurphy.uk/

10

Ok… so after I hid all the elements and then unhid them it randomly seems to work.

But now I have a grey boy at the top of the screen and it isnt a layer and have no idea where thats coming from lol

So much fun with this bug!

11

The box gives me this when I inspect it -

<div data-collapse="none" data-animation="default" data-duration="400" class="navbar w-nav"></div>

12

I think this has got nothing to do with the animation.

I have removed any animation and revert any display settings and the yellow boxes still doesn’t appear on preview mode when it is supposed.

13

I really cant work out what is going on -

Now the animation works… great!

But the NavBar layer is generating some code which gives it a grey background and idk where that code is coming from. If i hide the NavBar everything works as it should

Just that grey background when I put it back.

14

for some reason the animation is targeting the Nav Div and applying a class to it… but cant for the life of me figure out why lol

15

Ok home page working!

I turned off the ‘minify css’ and it works… resume page still no so lets see if i can recreate the solution haha

Thanks for your time with this btw! Appreciate it!

16

The grey comes from the w-nav class. Which i assume is the default color, right now it is overwriting your transparent settings. Which again, is really odd.

You can just add a custom css in site settings for .navbar: transparent !important;

Other than that, I have found a more consistent approach. Wrap both your Top and Bottom Div in a Parent Div. Give that parent div the Fixed.

Both child can be Relative. The animation should be more consistent.

17

No worries! I swear Webflow sometimes has weird bugs with animation and export which somehow solves itself few days later.

18

Well… after it was all working my way… i republished to all pages and guess what it doesnt work lol

I’m trying out your method but can’t seem to get it to work either… any chance you can elaborate a bit further? Sorry :man_facepalming:

19

Some things I changed

  1. Add a div to wrap Top Div and Bottom Div
    Screen Shot 2020-04-13 at 18.29.17

  2. Give this Div Height: 100%; Width: 100%; Position: Fixed; Display: Flex; Flex-direction: Column

  3. Change Top Div and Bottom div to have % instead of VH. and change their position to Relative instead of Fixed.
    Screen Shot 2020-04-13 at 18.49.21

  4. Create a new animation with % instead of VH. So Top div -100% and Bottom div 100%, make sure both has initial state of 0px. Set to affect All elements with class.

20

Bro, you are a legend!

Thank you for all your help!

1 Like