Cool Page Transition

Hey all,

I came across a site with a cool transition, and I was wondering how I would recreate something similar in Webflow.

This is the site http://www.stinkdigital.com/work/ - the part I’m interested in is when you click on a case study the box expands to fill a set space on the next page.

I haven’t started to build out this idea yet (so no Read-Only link) as I wanted a guide on how complex it would be before beginning.

Any help would be appreciated.

Thanks
Matt

Hey @QH-London great question! You can definitely build that out in Webflow with a few interactions. Then you’ll want to add some custom code to your site to allow for the link delay, you may find this helpful: jquery - Click - delay before navigating - Stack Overflow

Thanks for the reply @Waldo. So just trying to get my head around the interactions.

On click all the other elements display:none. The clicked box expands to the correct height, moves to the top and then expands to the correct width. And the custom code is used to delay the the load of the next page.

Would this be possible with a flexbox layout?

Thanks

I’ve started to have a quick play around - read-only link

It would be great if you could tell me how to implement the custom code and link that into webflow?

I’ve come across two issues -

  1. Is there a way to move the box to the top of the page, at the moment I am just transitioning it by a set number of pixels which means I need to know an exact number.

  2. I can’t seem to figure out a way to gracefully have all the other elements disappear, leaving the box in place before it transitions. Currently I’m using display:none which moves my box directly to the centre, which isn’t quite as elegant.

Thanks

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.