Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
KieranR100

Image to banner transition affect

Recommended Posts

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.

Link to post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×