Image to banner transition affect

[KieranR100 0 Likes (Newbie)]

Hello all,

Im currently starting to build a new site using Nuxt.js and Prismic (I can change if its easier to achieve this). It's the first time I've used Nuxt, so still a novice at it.

 

What I have: https://prnt.sc/qoladn

When I click on the "Client name here" section, I would like it to morph up to become the header, maintaining the image and text. And then the content below fades in.

I can make the whole page fade in, but can't pin down how to get the image to move to become the header.

 

An example of this is here: https://kentatoshikura.com

Although I don't know what they're built in.

 

Theres a few on here, but they all seem to look like they open in a modal. IF it helps its going to be an agency site, so it will have case studys, pages, blog, and contact.

 

Thank you.

[ZachSaucier 7,062 Likes (Superhero)]

Hey Kieran and welcome to the GreenSock forums. As I said on StackOverflow, the below threads can likely help you get started:

Let us know if you have specific questions.