Creating seamless transition between pages, idea's on how this is done?
I found this website: https://aboutcoolblue.com/nl/.
By clicking on one of the navigation items (1 through 6, 7 doesn't seem to do the same thing) in the center of the page everything seems to transition so seamless without any sort of reload of the resources.
Looks like the <head> stays the same for example when switching pages. Does anyone know how this is done?
Coolblue
Coolblue is meer dan een e-commercebedrijf. We bouwen totaaloplossingen voor onze klanten met onze ondersteunende infrastructuur. Dit doen we in Nederland, België en Duitsland, online en in onze 17 fysieke winkels.
7 Replies
I was gonna guess it was https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API, but it works in Firefox (where page transitions reportedly do not), so I'm gonna guess some fancy JavaScript.
https://greensock.com/gsap/
It's prob this but im not 100% sure
GreenSock
GSAP
It could be a Single Page Application and whenever a user clicks a link it just does a fancy transition
When you click on one of the fancy transitions, it doesn't make a request for an
html file, only a js file and images
So I want to say it is -probably a SPA and they use some library
In React there are libraries for it. Here's an article on something like it: https://dev.to/joserfelix/page-transitions-in-react-1c8g
Article in vanilla JS: https://req.co/insights/article/coding-page-transitions-vanilla-javascriptThanks guys! Looks quite complicated and I know some of the words on those pages. maybe someday 😜
Ah nonsense, I'm sure you could figure it out if you put some elbow grease into it