Updating CSS for incoming page – (Highway maintains the outgoing page's CSS)

[siddris14]

Hello.

I love the simplicity of Highway. Great job guys.

I am however facing an issue which is, page transitions work as expected but does not update the CSS for the incoming page. It maintains the CSS of the outgone page unless I refresh the page.

For example:

/------------------------------ Homepage ------------------------------/

Homepage CSS: /home-style.css

`

To Home To About

This is Homepage

`

/------------------------------ About Page ------------------------------/

About page CSS: /about-style.css

`

To Home To About

This is About Page

`

I would be very grateful if you can point me in the right direction.

Thank you!

[ThaoD5]

Hello @siddris14 ,

Thanks for appreciating Highway;

About your issue, this is absolutely normal that Highway does not manage this by default because this behavior is of your choice and isn't a default behavior. What you would need to do is load the style file related to the page you are visiting, so for example, on the onEnter event, you would replace the previous style file by the one concerned on the visited page. This solution would then be JS based, to handle with the events provided in Highway.core ( onEnter, ... ) and to be created by you, for your personal stack. :-)

Hope this helps, Thao

[siddris14]

Helle @ThaoD5

Thank you for your response.

Do I need to create a custom renderer in order to have access to the onEnter events..?

Thank you.

[ThaoD5]

You can check here for the core Events, but doing it per-renderer is also an option.

https://highway.js.org/examples/events.html

https://highway.js.org/api.html#renderers

[siddris14]

Thank you very much @ThaoD5 for your time and assistance. Let me go through the links you have sent me and revert back to you with the outcome.

Enjoy the rest of your day!

[siddris14]

@ThaoD5 I hope you are doing well.

I am finding it very difficult to implement the solution you suggested earlier on. I use Webflow for my HTML / CSS / JS and Vanilla JS / GSAP / THREE.JS for my animations and WebGL effects.

Here is the link to the work-in-progress site I am currently working on https://parisandco.shabaniddrisu.com

I would be very grateful if you can take a look at the structure of the elements. Perhaps that may help you give me a more applicable solution.

Thank you!