Zoom page transition HTML/CSS/JavaScript

Question

I want to create a page transition in HTML where by clicking an image/text there is this kind of Star Wars hyper jump animation. This means when I click the image/text the page zooms towards that image/text and that image/text turns into a separate page. Does anyone know if this is possible and how to do this? I believe I remember seeing it on a website a long time ago but I can't remember where unfortunately.

The animation I'm describing is similar to this gif https://giphy.com/gifs/bigblueboo-space-scifi-hyperspace-5xtDarHj0ORdxfWtV6g.

Thank you.

Answer 1

You have to use a framework to create custom page transitions, I would suggest swup or barbaJS with gsap

• Swup: https://swup.js.org/
• barbaJS: https://barba.js.org/
• GSAP: https://greensock.com/gsap/