Streaming live at 10am (PST)

Delay on page load doesn't work


#1

Been following this tutorial on page transitions (thanks @Aaron :raised_hands:) , but can’t make it work. Hope someone can have a look and shed some light on my fault?

I noticed that when placing the link `javascript:delay(‘URL’) Webflow automatically adds http:// even if I just click away as @Aaron suggests.

The site I’m working on:
https://preview.webflow.com/preview/taxpas?preview=fceb6b6ae882800fd523efb8f9ba477c

Thanks!


#2

Hey mate,

I replied to your Discuss comment :slight_smile:

Also seems to be working just fine, I mentioned in my comment that you were using an apostrophe not a back tick, that’s why it wasn’t working. ----> ` <---- This is a “Back tick”


#3

Thanks @Aaron, that part works now!

It’s still a bit unstable though. Sometimes when I click a link the animation occur, and sometimes it doesn’t. I thought it might be too complex, but now I just have a fade out of the complete body selector and it’s still not consistent. Any idea why?

https://preview.webflow.com/preview/taxpas?preview=fceb6b6ae882800fd523efb8f9ba477c

Thanks again


#4

Still trying to figure out what’s wrong with my transitions. @cyberdave would you mind having a look?

https://preview.webflow.com/preview/taxpas?preview=fceb6b6ae882800fd523efb8f9ba477c

Thanks


#5

Small update - pages seem to animate ok now (yey!!). Still encountering a weird problem:

When I enter the site all links direct to the correct page - I click “services” and get to the services page. But, if I click on one of the blog posts on the home page or blog page, and then click on a navbar itemI get directed to /blog/services (which does not exist obviously)- it’s suppose to simply direct to /services.

Any idea why this might happen?

https://preview.webflow.com/preview/taxpas?preview=fceb6b6ae882800fd523efb8f9ba477c

Thanks again

CC: @Aaron @cyberdave


#6

Hey @pitz sorry for the late reply, I was on holiday last week :slight_smile:

So it’s happening from the blog page because the site is trying to load the incoming page from the Blog folder on the backend, adding a forward slash " / " to the page links, so the look like this should fix it:

javascript:delay('/services')

That way the page knows to load from the root folder, not a sub-folder such as:
http://taxpas.webflow.io/blog/services

It’ll instead load like this (Which is correct):
http://taxpas.webflow.io/services

Hope that helps, Aaron.


#7

Yes! Works great. Thanks @Aaron!

Two other things I noticed:
First, on load, the site flickers for a split of a second before the animation is triggered. Is there a trick to smooth this out?

Secondly, the navbar used to have an indicator on the “current” page, so I could style the current page differently. Now the indicator is gone. Is there a way to bring it back some how?

Thanks again!


#8

Hey @pitz,

Glad it worked! Yeah noticed the flicker, looking at the build it’s hard to test as I can’t publish any chnages to see it live outside of Webflow, but looking in the IX for “Page load transition - fade in 2” try changing the targeting ethod on the Navbar to select all elements with this class as of right now it targets the element directly…

And for the page marker this will no longer work with this method of page navigation, as we’re using an external script to traverse pages the Webflow system doesn’t know to add a psuedo class of “Current” to the current page :confused:

Let me know how you get on,
Aaron.


#9

Thanks for noticing the target method @Aaron. I fixed it, but I don’t think it solved the flickering. If you think of something else please let me know.

Thanks for all the help!


#10

Hi @pitz, on the flickering, you should give the elements you are animating on page load a style set to display none on initial load, then use a show/hide interaction timed animation to show the element as the first step of the interaction.

I hope this helps


#11

:raised_hands::raised_hands::raised_hands:

Thanks @cyberdave works like charm!