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.
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.
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.
Image to banner transition affect
in GSAP
Posted
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.