please refer to this link: A Collection of Page Transitions
----- click “choose transition” then select “slide”
Description of action:
a. click on link (in nav and/or on a section on page)
b. the current page section scales down and the opacity is reduced to near 0 AS the next page section slides in from the right (full opacity) This is an exploration for our agency in moving from one page to another. But it’s just prototype so need to talk about AJAX etc. It could just be a large section of color that when clicked slides in from outside the viewport, the next section (or the section that is being clicked/called)
Overlay transition
– please refer to this link: Fullscreen Overlay Styles & Effects | Demo 5
Description of action:
a. click on link in a top nav
b. click launches an overlay with subnav content (or whatever) I just want this overlay to have a nice transition like the one in the example. The key here is when the base is created, I can edit the easing and etc …
Hi @nushi, thanks a lot for your post. You will probably like it around here because there are lots of people who like to put things together from codrops/tympanus.
A lot of the cool stuff they do there can be done in Webflow, and some things require additional custom css and/or scripts.
If you already have a site link you are working on, it will be helpful to others who want to take a look and help out
I don’t have a site I am working on because it’s just prototypes for interactions, transitions. It’s very basic. One page loads another page. but it’s a transition that takes a few steps. This is where I am stuck. I am stuck with creating a click trigger that affects multilple elements.
Let’s just say one section takes up the whole page. This can be thought of as a ‘page’ for these purposes. Another section is likely position absolute, and completely off the page. So, it’s likely got an x value that’ is large in PX’s.
Hope you guys can offer some assistance. Also, it’s not exactly like a Codrops transition. I have a PNG sketch that will hopefully illustrate what I am talking about but I cant attach it…
Yep, this feature will help a lot while you trying to build webapp with seamless transitions between states (as pages). So I think it would be superawesome to have just one select option (or more why not ) where you can choose what transition will apply to whole page after you click on link.
