How to transition between two screen on a UI Element?

[ArunNP (Arun)]

The UI, originally designed by Paul Flavius Nechita (Paul Flavius Nechita | Dribbble) was available for implementation as one of challenges @ http://www.100daysui.com. I wanted to check if webflow has the flexibility to develop and showcase web UI elements.

The project has a second part(scree two) as seen here - Loading.... When the user click on the purchase button, it transition to a new screen(seat selection screen here) where the user can select the seat. Also it has a ‘UP’ arrow that will take the user back to the movie poster screen(screen 1). I would like to understand how such interface can be developed using Webflow.

BUG: When I hover on the purchase now button, the cursor turns to ‘hand’, however, when I hover of the icon, the cursor remains normal. How can I make the image icon part of the button.

Also, kindly share improvement areas on the development. Or, how better I could have implemented this.

---

Here is my public share link: LINK

[coolest_vlad (Vlad Radchenko)]

You would have to put the image inside of a link block and then fit the image exactly to the link block size.

[ArunNP (Arun)]

Ok. Will try that. Thanks @VLADinSACRAMENTO for the suggestion.

[coolest_vlad (Vlad Radchenko)]

No problem, if you have any more questions don’t be afraid to ask. I am here to help.

[ArunNP (Arun)]

@VLADinSACRAMENTO - how can I implement the transition as seen on the original implementation given here - check the html

[coolest_vlad (Vlad Radchenko)]

What transition are you referring to? Sorry, I am using an iPhone so might not see everything that you see on desktop.

[MariusJurtz]

Hey @ArunNP

I hope we are talking about the same transition. I will try to explain.

The slider which appears after clicking the basket icon is a div container (position: fixed, height: 100VH, width: 100VW, maybe you’ll have to set the z-index to 9999)

Give this div an interaction and set just then initial appearance to “Transform > Move Down > 100%”

Then you have to set a click trigger interaction to the button wich should affect the class of your slide div. Then you will choose Transform and click done. Now it says “Move to origin”.

I’ve done a similar effect on my portfolio Page zackete.webflow.io
just click “jetzt anfragen” on top of the site.

If you have any more questions feel free to ask. But for now I have no time left

[ArunNP (Arun)]

Thanks @zackete_de. The one on your website is exactly what I’m looking for. I will implement the second part of the challenge as you advice. Cheers!