CMS × GSAP Logo Rotator by @arkadiuszpalki

NOTE: To use this component, you need to have GSAP set up. You can add GSAP through Webflow or by using custom code, but keep in mind that a Site Plan is required for these options.

1. Set Up GSAP and CMS

Ensure you have GSAP. It can be loaded natively via Webflow or through a script tag.

NOTE: GSAP via Webflow is available only for paid site plans 🥹

if u are want to add GSAP via custom code, go to next step.

Here is the GSAP setup using a script tag:
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script> ‍Add it to the custom code before the closing </body> tag.

Prepare your CMS or use an existing one.

You don’t need to upload a monochromatic version — we turn them black and white via CSS filters.

You can keep it like that, or if you prefer to use colored logos, just remove those settings:

Click on the IMG > Filters

2. Minimum Component Setup

Copy and Paste Component then convert it into Compoennt

After creating the component:

① Find the CMS Collection inside.

② Bind the Collection to the one you want to use.

③ Add an <img> element and bind your logo to it and..

④ ❗ IMPORTANT ❗

add the custom attribute:clients-logos-src

to <img> element.
‍

If everything is set up correctly, click the Preview button to see the Rotator.

Don’t forget to enable custom code 👉

3. Component Properties for Easy Customizations and Overrides

First, let's set up the toggling title:

① Click on the parent div

② Set the component visibility properties.

① Click on / CUSTOM ELEMENT inside the div

② Then bind the class to a property.

‍TIP: By default, Webflow doesn’t allow setting a class attribute — but using a custom element unlocks this.

You can now change it to any class you need to overwrite the default class.

If you want extra help with these classes, I recommend the Lumos Extension for Webflow

Now let's create text properties. Toggle the Multiline checkbox to make the input larger.

To edit the feel of animation:

① Open Component

② Open ⚡ – Component Scripts

③ Adjust the settings

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

4. Component Variables / Read more about Variables

Basic

Trusted by 150,000+ Twitter addicts who said “I’ll just scroll for 5 minutes” — 3 hours ago

Text color is inherited from the parent

Trusted by 150,000+ Twitter addicts who said “I’ll just scroll for 5 minutes” — 3 hours ago

The Same for Inverted - here we are overriting only:

① Border Color
② Logo IMG > Filters > Invert

Trusted by 150,000+ Twitter addicts who said “I’ll just scroll for 5 minutes” — 3 hours ago

BONUS

Static — show Collection list and hide the .clients--rotator div