How do I create page transitions?

Question

I want to create a circular page transition as shown in the navigation of this site I know I need to use barba.js however I have no idea where to start I've spent all day looking for a tutorial on how to achieve this but I have found nothing. Can anyone please suggest where to start looking on how to create this I have never used javascript before and am quite new to HTML and css

EDIT: apologies I should've mentioned I already have my site done with separate pages now I would like to sort out the transitions between them.

Answer 1

to use a javascript library is a difficult thing if you have never seen javascript, but if you are familiar with coding in other languages you could start by scripting simple tests and see how it works, watch some short tutorial or see examples, and then look to specific documentation on how to use barba.js

Instead if you haven't programmed anything yet start from the basis, learn about the logic of programming (using tutorials for beginners and trying small projects yourself), at some point you'll be ready to create using a library :)

Answer 2

I would recommend getting a solid fundamental understanding of HTML, CSS, and JavaScript before implementing a JavaScript library like barba.js. barbra.js is implemented in JavaScript so it will be confusing to try to understand where the library ends and pure Javascript starts. https://www.w3schools.com/js/default.asp is a great resource to get a solid fundemental in js. Here is the link to a barba.js tutorial if you still want to go ahead with it https://barba.js.org/docs/getstarted/basic-transition/

Answer 3

Perhaps make a new page, then transition from there. I haven't been doing HTML for a bit, so I've lost the code. Perhaps, use from transfering one page to another.