Scroll seems very choppy

Hey, guys!
Just wanted to get some insight from other perspectives.

So, I just finished this website and for some reason the scrolling just doesn’t seem smooth. Feels choppy between sections and I don’t know why. Very odd.

Here is the link: http://beatpro-v1.webflow.io/

I would appreciate any tips, thanks!

1 Like

everything (scroll/animations) seems fine to me on Win 10 Chrome 53

1 Like

Awesome… That’s good to know then. Im on a Mac and ever since I have upgraded to High Sierra OS browser scrolling with the trackpad just seems choppy. It’s really frustrating lol…

Hey loving the design of your site. Quick question if I may, what are the box shadow settings you have for the email sign up, very subtle but effective I want to use :slight_smile:

1 Like

Thanks so much man!
Sure thing…

Dropbox Shadow Settings:
-Down 180 degrees is the directional setting.
-Distance in this case is 16 (I generally stay between 12 and 16)
-Blur setting is always around 25-30
-Size, I leave at zeo

As for color, I just use Black and generally keep it around 16-18%
So the hex would look like: rgba(0, 0, 0, 0.17)

And if I’m doing an animation where it looks like the element is lifting off the page a bit on hover lets say, then I will just lower all the settings a bit as is and then use these settings on hover.

Hope this helps!
:slight_smile:

2 Likes

You sir are a star! Keep up the great work!

1 Like

Working good for me, Mac and Safari/Chrome. Nice work too.

Can I ask, what did you use for the Instagram embed at the bottom?

Steve

Steve Holmes
Creative Director

energi.design http://energi.design/

1 Like

Thank you my guy! Will do! Much appreciated!

1 Like

Well that is a breath of fresh air for me then! Thanks so much!

I pay for the Elfsight(very affordable in my opinion) Instagram widget!
It’s great, you can customize it on their site and simply embed the Javascript code they generate!
Probably the nicest widget/plugin for instagram I have come across!

Their YouTube one is also awesome!

Oh cool, thanks for that info. I’ll check it out in more detail later, but I already think it’s far better than a simple code I am using right now :slight_smile:

Thanks again!

Steve

Steve Holmes
Creative Director

energi.design http://energi.design/

1 Like

May I see a link to the one you’re using now?

I was going to originally go with something similar as well but I am a bit too picky haha.

The work-in-progress site it’s being used on is here:

http://next-level-bikeshop.webflow.io

Go to the Kontakt page and it’s at the bottom. It’s OK, simple rollover etc, but could have a bit more punch maybe. Plus I haven’t yet figured out how to change the columns for tablet and phone responsive behaviour, when it’s an HTML embed on the page. I would likely just duplicate the embed twice more, change the values, and activate the right one on the right device.

Steve

Steve Holmes
Creative Director

energi.design http://energi.design/

1 Like

Oh I see, yes! It’s actually clean. Very simple but, that’s not a bad thing either. Who makes this if I may ask? Or where can I find it?

And I would agree, that work around by duplicating the embed is a fairly easy one lol. Can’t go wrong there.

The site is very clean too! Love it!

(Btw, I tried to write this last night but Webflow limited me on replies since I’m “new” lol)

Hey there,

This is the place I found the js:

And this is the HTML embed. All you need is a div with id “Instafeed” on your page.

And a little extra CSS coding for the rollovers:

img { opacity:1; transition:opacity .2s; -webkit-transition:opacity .2s; } img:hover { opacity:0.4; cursor:zoom-in }

Steve

Steve Holmes
Creative Director

energi.design http://energi.design/

That’s awesome… I just came across this the other day! Seems like you can really do a lot with it actually! Thanks a mill Steve!

Sure thing! :slight_smile:

Steve

Steve Holmes
Creative Director

energi.design http://energi.design/

What’s your best email? You do work for hire?

Hey again (I would address you by name, but haven’t figured it out from J_Canan yet:)

This is my work and best email, and do indeed work for hire.

Steve

Steve Holmes
Creative Director

energi.design http://energi.design/

Oh lol I’m sorry. You can just call me J.
I just sent you a message.

Cheers!

This worked a treat, nice work, thanks again

1 Like