Streaming live at 10am (PST)

Full Page Display Transitions


#1

Hello everyone,

I'm not a designer so please try not to get frustrated with me

I am stuck trying to make a non scrolling single page layout, where by clicking something you switch the content on the screen without moving to a different page.

Here is my site
http://redpanda.webflow.io/ --- Click the pink text when it appears.

https://webflow.com/raluy90

the pink section is supposed to be hidden and in theory, i'm trying to make a hidden section per color.

Any recommendations, tips or tricks would be helpful ! thanks


#2

hey @cruly I've taken a look at the site. Pretty cool concept and I think I've see this done before on Webflow. What would really help though is to see maybe a quick sketch or mockup of the differnet pages? It's only because I'm struggling to understand how each section should intereact with each other and want to help best I can smiley


#3

Hey tim thanks for the reply,

I've also seen in done in webflow, and i've studied the sites and transitions but apparently i'm still missing something.

http://theminimalists.webflow.io/ this is the closest example i can find.

maybe you can point out what i'm missing.

thanks again


#4

What about using the tabs or slider widget and making them full page?

You would just need to customize the position of the tab menu or slider nav.


#5

I would suggest Tabs for this type of functionailty or quite complex Interactions using the Interactions Tab. Example would be creating your four buttons. Giving each one its own interaction. The trigger should be click...

You then need to make sure you show your hidden element by selecting it's class...

On First click now you can decide your animation... Maybe a fade, slide in via Move etc...

Hope your able to follow on if not and you'd like to see an example let me know and i'm sure i could wuickly whip something together smile


#6

Quick and dirty example with tabs:
https://preview.webflow.com/preview/advtabs?preview=7b777b17d8ccfeaaeeab8259c63af0c7


#7

I was finally able to do what i wanted to do. It took a little bit of playing around with setting, its a bit hacky but works.

However, i'm still not fully satisfied with it.

I haven't tried using the tabs functionality widget yet, I will check it out.

Thanks guys smile


#8

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