Animated Scrolling Logos in Squarespace 7.1

[@SEWebDesign]

I have now added in a gradient fade option on either side. To apply this effect to a section - when editing the content: Design Tab > Style > Toggle on "Card." The padding settings in this panel don't matter since I remove them with the plugin.

[@jordangian6208]

found this video - 5 minutes later it was live and working without any faults! i've been trying to figure this out for years - thanks so much!!!

[@SEWebDesign]

So glad to hear it was helpful!

[@robertcoleman8820]

Hi Chris. This is a great plugin that I think I am going to use for a site I am working on. Can you say a little bit about what size logos you used and the aspect ration, how you resized them, and how you converted them to white?

[@SEWebDesign]

For the size, you can control that in the plugin’s CSS. For the aspect ratio, the width doesn’t matter, but each logo you upload should be the same height. To make them all white I took the logos into photoshop and made them all white and then uploaded the .pngs

[@alysawakefield4963]

This was SO easy to purchase and install, thank you!!

[@SEWebDesign]

Great to hear! You are welcome!

[@wild-natured-N]

Right on - works as described. Big thanks to you for creating this and making it so easy to implement. Had to look a bit for the code areas, but this is also my first go at adding a plugin... found it under website > pages > utilities; also had to toggle the title off to make it disappear.

[@SEWebDesign]

Thanks for your feedback! As for hiding the title, please toggle it back on and then just remove the text in the box and that will hide it. The title needs to be enabled to trigger the plugin.

[@AfaAhLoo]

Youre a lifesaver. Thank you for this. Ive been trying to figure out how to do this for the past month haha glad i found your video.

[@SEWebDesign]

I'm so glad!

[@hunchbacktravis]

Thank you! This was stupid easy to implement. The snippet saved me a ton of work and headache.

[@SEWebDesign]

I’m glad to hear it! If you have any issues on IOS or safari I just updated the code so you can try that if needed.

[@leemowlem-pixels]

Amazing so helpful Chris! I was using a Elfsight logo showcase plugin that was glitching and crashing on apple phone and I found your plugin and video - It worked perfectly first time on all platforms and browsers! I love the fade at the edges you introduced - it looks so slick! Thank you so much I should have checked out your plugins and advice first!

[@SEWebDesign]

I’m so glad to hear it Lee! Thank you for sharing your experience and I’m glad it was positive!

[@jakekleinmanphillips]

Great purchase. Happy with the mobile solution as well. Great work!

[@SEWebDesign]

I’m so glad! Thank you!

[@bromleydigital]

Thank you! Great plug-in, super easy to install and get live.

[@SEWebDesign]

Awesome to hear! I’m so glad!

[@deveneywilliams5073]

LOVE!! This worked when I put it on my home page and I wanted to add it to my contact me page at the bottom and that's when I noticed it did not work. Will this only work in one page on the entire site? Or can you add it to multiple pages? Thanks so much! So happy I found your page.

[@SEWebDesign]

You can add it to multiple pages! Just make sure the JavaScript is in the site wide footer code injection and the CSS is in the custom CSS window and you can use it on multiple pages. Just make sure the section settings are correct. I recommend once you have one set up, save it as a saved section and then you can easily add it to other pages

[@nicoleholbrook6527]

Works perfectly and using on a client site. Only one issue: the client wants some sort of intro text or title to go above the logos. Title is switched on but set to display none in the code. Is there away to bring text to the top?

[@SEWebDesign]

The best way is to add a section above with a text block for the title. Then in the scrolling logos section you can reduce the top padding to bring the logos close to the title. Send me an email if you need further guidance on that!

[@maximemochamps8582]

What a god ! Bought it and 100% satisfied !

[@SEWebDesign]

I'm so glad to hear that Maxime!

[@tomconklinvo]

Good stuff... Been searching for a way to do this. Question... You said that with your plug-in you need to have the business plan. I know that I can do custom CSS with the personal plan... I'm assuming that is not sufficient... Does thw plugin require code injection which is not on the personal plan? Thank you!!!

[@SEWebDesign]

Yes exactly, this plugin requires code injection which is not on the personal plan.

[@tomconklinvo]

@@SEWebDesign Great thanks. Looks like I'm upgrading. Hopefully, my brain can handle adding the plugin. HA!

[@SEWebDesign]

@@tomconklinvo if you have any issues please email me! I am happy to help

[@tomconklinvo]

​@@SEWebDesignThank you! I'll be grabbing the plug-in shortly. If I have any issues I will reach out. Thank you so much once again.

[@tomconklinvo]

@@SEWebDesign Hey... all set and it looks fantastic. Thank you!

[@matthewarnold9652]

The setup is easy and the scrolling is really smooth! The only issue I encountered is that the section title doesn't disappear when the code is loaded. I simply removed the title text but did not toggle the title off, but now I have too much space. I might try contacting SEWeb, but did anyone else encounter this issue? Thanks!

[@SEWebDesign]

Generally when you delete the text it should also remove the space. But please send me an email with the link to your site and I am happy to take a look!

[@matthewarnold9652]

@@SEWebDesign thanks for your quick response. I guess I totally missed it but I had to toggle off "title", sav,e and then reload the page. All looks great now!

[@andreacitlalli]

I just got your plugin and it's scrolling! one issue that I found is that my logos are a few different formats (icons vs word marks). how can I make them have a max width or max height with css?

[@SEWebDesign]

Yes you can give them a max height through the plugin CSS. The installation page covers how to format the logos so they appear similar sizes. Essentially each image should have the same exact height and then you can scale the content inside as needed so they are all the same size. Then their widths can be cropped to the content inside

[@RocketCarpenter]

Works Great! Just purchased and loaded it!

[@SEWebDesign]

Great to hear!!

[@FleurandFable]

works perfectly, thanks!

[@SEWebDesign]

I’m so glad! You are welcome!

[@MomentumStudiosAU]

Thanks for making this! Plugin works great. i'm wondering if there's a way for it to only be triggered when a user gets close to the block it is active on? We have a few big name logos that we want people to see first when looking at this block, but if if just starts when they open the website, we know its never going to line up straight away, given everyone takes different amoutns of time to work their way through a site. Thanks!

[@SEWebDesign]

It's not a feature I would build into the plugin as I want to keep it as light as possible and it would require extra code to accomplish. But I can write the code for you. Send me an email and I can give you a quote!

[@Staci-English-Stuff]

Can you do this with pictures?

[@SEWebDesign]

These are pictures, they are just .pngs of logos. So yes!

[@labrow]

This is great but I don't think you can add links to the logos?

[@SEWebDesign]

Yes you can! I have CSS you can add for making a logo click through to a link.

[@JaiSequoia]

hey Chris, so one can use coloured logos on a white background with this plugin yes?

[@SEWebDesign]

Yes you can!

[@JaiSequoia]

Thank you. 😊

[@badluckystudio]

I have added everything and it's working great, but the custom sizing of the logos doesn't seem to be working. The height of the section changes but the logos stay the same. Any tips?

[@badluckystudio]

Nevermind, figured out where I went wrong. Disregard, you're a lifesaver!

[@SEWebDesign]

Ok great to hear!

[@stamatisspinos]

Hello thanks for this. There is any way to use it without Code Injection because I m on personal plan on squarespace. Any recommendation ?

[@SEWebDesign]

Unfortunately not. It requires code injection to function

[@stamatisspinos]

@@SEWebDesign okk thank you

[@sarikathakorlal]

This is awesome, thank you!

[@SEWebDesign]

I'm glad you like it!

[@justinseimits184]

Do the logos need to be the same size or will this plugin auto crop or auto fit them to make them look uniformed?

[@SEWebDesign]

The logo images need to be the same height in order to look the most uniform.

[@PrashantDault-c3g]

Hi! I just bought this from you and love it. However, by default it seems theres a clickthrough link but when I clickthrough I'm just getting an error. How do you change the clickthrough link for each logo?

[@SEWebDesign]

Can you send me an email with the link to your site so I can take a look? I will better be able to provide support over email as there shouldn’t be a default clickthrough

[@PrashantDault-c3g]

Thanks! Yes will email you@@SEWebDesign

[@katlynslocumdesign]

Hey, thanks for this! Is there a way for the title to still show, to include a "Featured In" or "As Seen On" above the logos?

[@SEWebDesign]

I recommended adding a section above that contains the heading

[@AboundWebDesign]

Is it possible to make this slideshow pause on hover on desktop? (hoping you didn't talk about that and I just missed it)

[@SEWebDesign]

Yes it is! That CSS is included on the installation page

[@AboundWebDesign]

@@SEWebDesignGot it. Thank you!

[@fezenstein]

Can this work for a large “panorama” ? I made a huge wide panorama / cut it up into 1000x1000 for Instagram galleries but would love for it to auto scroll and loop like this? The carousel gallery doesn’t loop…

[@SEWebDesign]

Yes I don’t see why not! Just set the gap between images to 0 so it looks seamless

[@ryanrivas2427]

For some reason, I don't see the option "Space Below Section Tile" it only shows "Space Between Image and Text" :(

[@SEWebDesign]

You need to enable section title in the content tab!

[@ericduanejohnson]

Can I complete this animation with a trial website, or do I need to have my website on a subscription for this to show up properly? Currently on a trial and the effects after following instructions are a tiny black bar that doesn't show logos.

[@SEWebDesign]

Responding here so others can see, you now need to set the image aspect ratio to "Original"

[@miles9974]

Lovely plugin thank you. Just bought it

[@SEWebDesign]

Awesome, thanks for supporting my channel!

[@yanasaintlevie]

They removed the "space between elements" option...so what do we do now?

[@SEWebDesign]

To control the space between logos, that is done through the plugin CSS, so you shouldn’t need that option. Also, make sure you are using a simple list layout and not a carousel auto layout section.

[@michaelkvick]

Just got this and had a question... followed the instructions and it makes the logos just disappear. Does the website need to be fully live in order for it to be working? Currently in the trial period and thought that could be it.

[@SEWebDesign]

It should work in trial mode. Can you send me an email through my code support form on my contact page with a link to the site please? I’ll take a look

[@annej6039]

So so so helpful, thank you! Donated 🙂

[@SEWebDesign]

Received! Thank you very much Anne!

[@bambulinoshorts]

You coul include a fade out CSS option, same as on the scrolling block, it’s a nice effect to use on both sides.

[@SEWebDesign]

Good idea! I think I will add that!

[@bambulinoshorts]

@@SEWebDesign Thanks! Please let me knnow when you add, I will buy the plugin!

[@SEWebDesign]

@@bambulinoshorts I have now added in that feature. If you want the gradient fade on either side, just toggle on the "card" setting. When editing the content: Design Tab > Style > Toggle on "Card."

[@JaiSequoia]

Amazing! Well done chris

[@JaiSequoia]

I bet one could do something cool with graphic elements and this code… hmmm

[@jasperbalba7429]

HI can I add a motion graphics with transparent background? For example, a video logo with transparent background so I can overlay it on text or other stuffs

[@SEWebDesign]

Auto layout sections support image types, so .png, .jpeg, and .gif

[@frederikhermans5299]

How did you remove the section title? If I remove the section title, I'm not able to set the Space Below Section Title (and hence not activating the plugin). Did you override it with CSS?

[@SEWebDesign]

Keep it enabled but just remove the text from the title text field and it will be hidden.

[@daviddavino9689]

Yup. I followed direction perfectly and couldn’t get it to work. No scrolling. Also, my logos had text written underneath saying "description goes here." which I couldn't remove.

[@SEWebDesign]

If you send an email I am happy to look into it!

[@kevinevans1]

Did you figure it out? Code did not work for me either

[@artomobiliainc5735]

Here is the question... Is there a way to reference a gallery for the logos, rather than using a gallery section, so that you can have same set of logos scrolling across different pages without having to maintain logos in multiple places...

[@SEWebDesign]

Unfortunately not with this plugin. They would need to be maintained separately.

[@alexbh]

How do I add links to each image? We're scrolling different news outlets' logos and want to add a link to each article that we've been featured. Thanks!

[@SEWebDesign]

There is an extra CSS snippet and instructions for doing that on the installation page!

[@cocojumbo3]

is there any way to bring the logos closer together? I have space between columns and space between rows both set to 0px but the logos are still a little too spaced out

[@SEWebDesign]

You can change the image aspect ratio to better match the aspect ratio of your logos. For example, if your logo images are Square, change the aspect ratio to Square and they will appear closer together.

[@cocojumbo3]

@@SEWebDesign I changed the aspect ratio from 3:2 to 1:1 and the images are closer together now, thanks so much!

[@SEWebDesign]

@@cocojumbo3 Great! No problem!

[@Iona_b]

It's not working for me. I copied your video exactly but the images don't move at all. What am I doing wrong?

[@SEWebDesign]

Did you purchase the plugin linked in the description? Make sure you are on the business plan or higher and make sure you have both the code and CSS copied into the correct places on your site. Also make sure you have the space under section title set to 92px. If you still have trouble please send me an email with the link to your site

[@digiratimax]

Thank you!

[@SEWebDesign]

You're welcome!

[@MiamiDesignShop]

Can you add code so that each logo is clickable? If so I will buy now. We're launching our site today :-D

[@SEWebDesign]

Yes you can! That additional code is included on the plugin installation page.

[@specter_ax99]

hello, ive paid for this but unfortunately my logos dont scroll infinitely ? it does not repeat the logos, just shows them scrolling once

[@SEWebDesign]

The logos must span the page in order to scroll infinitely. If you don’t have enough logos to span the page then upload them twice. Also please email me for customer support!

[@adrianmechelle3784]

How do you source the actual logos?

[@Amounraa]

what I do personally is I go to the website I right click then click on inspect element then I download the png image or if its a svg I copy the svg code then search on google for a website to convert svg to png. after that I take all pngs to canva and adjust them

[@SEWebDesign]

I just google them. Wikipedia often has png versions of company logos depending on the size of the business

[@levigaal]

As far as i see there is NO "Space below title" section anymore

[@SEWebDesign]

Make sure you enable the section title in the content tab. Then you will see it in the spacing panel

[@levigaal]

@@SEWebDesign thanks, found it. I just realized now I should buy the plugin first...

[@jhyh925]

having issue with it working as well.

[@SEWebDesign]

Send me an email and I'll help you out as soon as I'm back from my Honeymoon. In the meantime, make sure you follow the instructions exactly otherwise the code won't apply.

[@kevinevans1]

Did you figure it out? Code did not work for me either

[@odayalsa108]

It didn't work for me. Is it because I'm on probation or what?

[@SEWebDesign]

For plugin support please send me an email with your order number and I am happy to assist

[@RyanCourtneyy]

I followed step-by-step and still not working any advice?

[@SEWebDesign]

Did you purchase my plugin? Send me an email if you need plugin support

[@kevinevans1]

Did you figure it out? Code did not work for me either

[@GergöRabi-t6b]

Hey. I followed direction perfectly and couldn’t get it to work. No scrolling. How can i fix it?

[@SEWebDesign]

Please send me an email for any plugin code support!

[@kevinevans1]

Did you figure it out? Code did not work for me either

[@GergöRabi-t6b]

Yes. i just had to remove an other code or plugin. @@kevinevans1

[@LordKiser]

I FUCKING LOVE YOU!

[@SEWebDesign]

Hahaha ❤️

[@figedx3338]

Can't get it to work. Any idea why?

[@SEWebDesign]

Send me an email! I can help with any code issues

[@kevinevans1]

Did you figure it out? Code did not work for me either

[@lane8534]

Promo>SM

[@uv-nyc]

Why do you have to pay for such a BS plug in? It's a rip off.

[@SEWebDesign]

Why is it B.S.? This code allows you to do something Squarespace doesn’t do. It’s only $25 compared to the time it would take to code if you knew how or hiring a developer at $100+ an hour to code it for you. Curious to hear your thoughts.

[@uv-nyc]

@@SEWebDesign My thoughts are not for the plug in. I apologize for making it sound like I blame them. The BS is that something so simple isn't offered freely on Squarespace platform to begin with. It's become a basic need and almost every website uses something similar to this, that it should be offered. I'm very frustrated with Squarespace in general and this entire process of building a website was very NOT user friendly for me, even though I believe to be a highly technological person.

[@SEWebDesign]

@@uv-nyc I understand, thanks for clarifying!