Been following this tutorial on page transitions (thanks @Aaron ) , but can’t make it work. Hope someone can have a look and shed some light on my fault?
The site I’m working on:
I replied to your Discuss comment
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”
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?
Still trying to figure out what’s wrong with my transitions. @cyberdave would you mind having a look?
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?
CC: @Aaron @cyberdave
Hey @pitz sorry for the late reply, I was on holiday last week
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:
That way the page knows to load from the root folder, not a sub-folder such as:
It’ll instead load like this (Which is correct):
Hope that helps, Aaron.
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?
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
Let me know how you get on,
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!
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
Thanks @cyberdave works like charm!