The Pinecone Collective - Sydney, Australia

Hi there everyone,

I just wanted to share my first web development ever, thanks to webflow -round of applause for webflow-

I’ve been really struggling and the community has helped me so much on the way to getting this product out in the open, it’s still got a bit of tweaking and UX to do though i’d love to share it with you. I never saw this day coming where I could build a whole website from scratch and also have all these functions without a year into coding, phew.

http://www.thepinecone.co/

I’ve used a whole lot of fun things that i’ve found from the forums:

  • Scroll up navigation
  • Interactions!!
  • Zopim Live Chat (awesome and so easy)
  • I will be looking at localize.js in the future
  • Looking for feedback and new ideas

Please give me any feedback and excuse the grotesque coding, i’m still in a slow learning curve and will only get better every time, especially with your help, ideas and feedback.

Cheers,
Julian

5 Likes

I love it @juliansocial, very nice. Good job :smile:

One thing I noticed, is that there is an interaction you have setup, where the paragraphs slide in, and first para slides in, then the next two slide in both at the same time, instead of one after the other…you might check that… See my screenshot of the area affected:

Cheers and really nice job. I especially like the way you made the contact form… nice touch…

Love the loader, color theme & form! Amazing first webflow site!

Heya,

Thanks!! @jaidenraleach, it’s been a ball working on this project. The branding is supposed to feel really soft and approachable, didn’t want anything too corporate or serious. The only problem is the loader is that it blocks all the work I did for the interactions of the header text, logo and stuff - when you go on the homepage, do you know if there is any way to keep the interactions waiting until the loader has been completed? hmmph.

Also, thanks for the heads up @cyberdave, i’ve noticed that though didn’t know if it was the browser or something wrong with the scrolling - i’ll go over the interactions and make sure they’re sound.

Cheers guys,
Julian

1 Like

Fixed it all up! Thanks again.

Its definitely approachable! The best way is to tell the interactions to wait until “page assets have loaded” and tell the loader to hide on page load but also to wait “until assets have loaded” (its a little check box) so that basically the loader shows till the page has all loaded, then disappears and the interactions start. I can see brief interactions after the loader though so guess you did it already as you said :slight_smile:

Hey Jaiden, always excited for your responses now! haha.

I’ve just touched on the four interactions and clicked on trigger, and clicked the box ‘wait for assets’ to load - it looks a bit better though still delayed a little bit. Thanks for the heads up though.

"and tell the loader to hide on page load but also to wait “until assets have loaded” - the problem is that the loader is coded in and I don’t know how to touch the custom code really, hmmph.

Another thing, this the code for my header appearing when you scroll up, do you know which area is to make it less sensitive just by a smidgen?

$(document).ready(function(){

$('body').bind('mousewheel', function(e){

    if(e.originalEvent.wheelDelta < 0) {
        userScrollDown()
    } else {
        userScrollUp()
    }

})

function userScrollDown() {
    $('.header').css('top', '-103px')
}
function userScrollUp() {
    $('.header').css('top', '0')

Haha glad to hear it!! No need to touch the code for the loader, just select the code box / html embed that it is in and create an interaction and choose on load display: none - its the option with the eyeball, and check wait for assets to load.

As for the code, unless you give me the link to the script youre using I’m not sure how to adjust how sensitive it is… however using this script: Hide your header on scroll - Headroom.js all you have to do is change the “tolerance” number (the higher the tolerance the longer you have to scroll up before the header appears). hope that helps :smile: