Streaming live at 10am (PST)

My latest design project. Feedback appreciated


#1

Here is a site recently launched for a client; my first bilingual website (and perhaps my last). Because I have spent a lot of time on it, I am tired of looking at it, and I'm probably too numb to see design flaws, I'd appreciate your feedback. Please feel free to point out anything you feel needs improving.

There is problem on the home page bugging me. So, while you're looking, if you can tell me how to fix it that would be great. The problem is this:

When you click the blue "CLICK HERE TO LEARN ABOUT OUR NAME" tab, the hidden box slides into view. But, it just appears and doesn't "unravel" like the way it is shown in the "Click to Show/Hide Element" tutorial. As it closes the text inside the box remains visible (appears to be over the gray section) until fully closed.

http://paptake.com/index.html

Thanks.


#2

Hey @stuzz you should be able to get the animation a little smoother, make sure that you have your heights set at 0px for the beginning of the animation (basically on click, first step should be display block: 0px height, then the next step is the height part). Then when you hit the close button, change the height to 0px there at the last step before doing the display:none. smile If you send over a preview link we could help you find the best solution for the show/hide box animation smiley

It looks like the animations are missing on the height of the text block within the expanding div. smile

Otherwise the site looks lovely! Nice job! smile


#3

@Waldo_Broodryk,

Thanks for your feedback and instructions. I will have to take another look at the interactions applied there but I thought I did have the display block set at 0px height. Anyway, here is the preview if you care to look at it. I appreciate your help.

https://preview.webflow.com/preview/paptake?preview=a159823375ae2390130531ee0807a366


#4

Very nice, what animation is used for this section? I really like it.


#5

Very nice website @stuzz! I like the interactions as well. smiley


#6

Hi @seank, thank you for the compliment.

Sorry it took me so long to reply. There are several interactions involved like: move to the left/right, scale, opacity, widths, etc. You can take a look at them when you open the preview: https://preview.webflow.com/preview/paptake?preview=a159823375ae2390130531ee0807a366


#7

@MinewireNetwork, Thanks for looking and posting.


#8

Hey @stuzz my apologies, I left this off of my to-do list! And ended up helping someone else with a similar issue, here is a link to about implementing the show/hide technique to be really smooth: http://forum.webflow.com/t/show-hide-problem/18557

Please let me know if you have any questions, or would like an example specific to your build. I believe in you @stuzz (trick tip, make sure that the main container being opened doesn't have any padding on top or bottom and is set to overflow: hidden wink )

Here if you have any questions.

Thank you,

Waldo


#9

#10