[Paid] Big 120px Logo to Small 40px Logo Smooth Transition (COMPLETE)

[ryanerwin]

What would you like done?

We have a logo that we absolutely love. It’s a big circle thing… Just imagine it’s something like this thing but more colorful… lots of details you loose when you shrink it down…:

For now, I changed our CSS so our awesome 120x120px (retina resolution) logo scrolls off the top of the screen along with the search / hamburger / user toolbar… Looks good to us. However, the more I use discourse the more I think this weakens usability. I also loose the large thread titles at the top of each page.

I would like our big 120x120px (but retina resolution) logo to very smoothly scale/animate/transform into the 40x40px smaller logo so that my compact top bar can continue to be visible all the time.

1. The solution should work on both desktop and mobile mode.
2. It needs to be attractive… The current method of letting the top bar scroll away works, but it’s not ideal for users. Solution needs to look better than the way we have it now. Unfortunately, better is subjective - totally realize that - but if that means extra rework to tweak endlessly you’ll be compensated accordingly.
3. Multiple approaches may be feasible. Could animate transforming just the logo, or the whole top nav… The point is to do so in a way that looks very good and that’s not visually jarring. Should be very slick like when the “iscourse” becomes a thread title - ideally even better than that.
4. We think we have very high aesthetic standards, one of our leaders has made some very well known consumer designs, and our logo is super important to us… This has to be perfect.
5. Ideally this could be done in a way that it gets incorporated back into Discourse since lots of folks have circular/square/non-horizontal logos and this could be a good tool for the community. At the very least, would like to make it a publicly available plugin.

When do you need it done?

7-14 days.

What is your budget, in $ USD that you can offer for this task?

Hundreds of dollars. Depends on exactly how you propose solving this.

Full disclosure:

• I have another work item “Fastly Integrated Who’s Online Plugin” also open in marketplace now
• We’re a US company based in Washington, USA
• I work 100% remote, and will be your point of contact on the project

[tshenry (Taylor)]

I’ve been playing around with this a little bit. Can you tell me if this is the general idea you’re looking for? There’s still plenty to iron out, but I just wanted to gauge if I’m on the right track.

[tshenry (Taylor)]

Ryan was nice enough to want to share the outcome of this large-to-small logo transition with the community. We ended up settling on a different approach from what’s shown in the GIF above. The large logo will scroll off the page, but once it has fully gone out of view, the standard header bar appears.

The generalized version of this theme-component can be found here:

Big Header - Little Header

This theme component will provide a stationary header with a large logo when scrolled at the top of the page. As you scroll down the page, the normal Discourse header bar will appear. This allows a large site logo to be cleanly displayed at the top of the page. On mobile, the header bar will only display when the phone is in portrait orientation. Vertical space is usually fairly limited when you are in landscape orientation, so this will keep things open. To see the header again, you can either…

Thanks again Ryan for wanting to share this and for being such a great person to work with.

[DNSTARS]

Sorry to necro an old thread but of course PM is disabled for new registrants…

I was wondering if I might enquire @ryanerwin where you got such a great logo from?

[ryanerwin]

The wave was based on a public domain image I found on Wikipedia…

Not a real logo, just a placeholder.

[DNSTARS]

Here was me falling in love with your place holder whoops.